29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Programación en JavaScript/Texto completo

< Programación en JavaScript

Programación en JavaScript
por es.wikibooks.org

Sumario
Introducción
¿Qué podemos hacer con JavaScript?
Características de JavaScript
Las variables en JavaScript
Tipos de datos en JavaScript
Declaración de variables
Operar con variables
Arrays (Matrices)
Sentencias de control
Condicionales
If
Switch
Operadores lógicos y relacionales
Bucles
For
Modificación de la variable de control dentro del bucle
Bucles anidados
Bucles infinitos
For sobre listas
While
Funciones
¿Qué son las funciones?
Funciones con parámetros
Devolución de datos
Funciones recursivas
Funciones en JavaScript
Mostrar ventana de confirmación (aceptar o cancelar)
Abrir una ventana nueva
Cambiar la URL actual
Imprimir una página
Cambiar el tamaño de la ventana actual
Avanzar a una posición específica de la ventana
Retrasar la ejecución del programa durante un tiempo determinado
Cambiar una imagen por otra
Clases y objetos
Creación de funciones miembro
Creando clases usando el estándar ECMAScript 6
Creando una clase

Clases predeterminadas en JavaScript

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 1/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Clase Array
Clase Date
Clase Math
Clase String
Gestión de formularios
Gestión del formulario de datos
Apéndice A. Como escribir código en JavaScript
Los comentarios
Los nombres de las variables
Apéndice B. Operadores en JavaScript
Apéndice C. Ejemplos de código
Tipos de datos en JavaScript
Declaración de variables
Operar con variables
Arrays (Matrices)

Introducción
El Jav aScript es un lenguaje de programación ampliamente utilizado en el mundo del desarrollo web por ser muy v ersátil y
potente, tanto para la realización de pequeñas tareas como para la gestión de complejas aplicaciones. Además, ha saltado el
ámbito de la web, y también podemos encontrarlo en otros entornos, como es el lenguaje ActionScript de Macromedia, que
acompaña al sistema Flash.

Jav aScript es un lenguaje interpretado que, al contrario de las aplicaciones normales, que son ejecutadas por el sistema
operativ o, es ejecutado por el nav egador que utilizamos para v er las páginas. Eso hace que podamos desarrollar aplicaciones
de muy div erso tipo, desde generadores de HTML, comprobadores de formularios, etc..., hasta programas que gestionen las
capas de una página. Pueden desarrollarse incluso aplicaciones que permitan poder tener capas en una página como si fueran
v entanas, y dar la sensación de estar trabajando con una aplicación con interfaz de v entanas.

Jav aScript no es el único lenguaje que podemos encontrar en la web. También tenemos a su gran contrincante: Visual Basic
Script. Este lenguaje, desarrollado por Microsoft, está basado en el lenguaje Basic de esta empresa, pero desgraciadamente sólo
puede utilizarse en el nav egador Internet Explorer. Si queremos que nuestras páginas dinámicas puedan ser v istas desde
cualquier nav egador y sistema operativ o, la elección más adecuada es sin lugar a dudas Jav aScript.

¿Qué podemos hacer con JavaScript?

Páginas dinámicas (DHTML)
Comprobación de datos (Formularios)
Uso de los elementos de la página web
Intercambiar información entre páginas web en distintas ventanas
Manipulación de gráficos, texto, etc...
Comunicación con plug-ins: Flash, Java, Shockwave, etc...

Características de JavaScript
Jav aScript comparte muchos elementos con otros lenguajes de alto niv el. Hay que tener en cuenta que este lenguaje es muy
semejante a otros como C, Jav a o PHP, tanto en su formato como en su sintaxis, aunque por supuesto tiene sus propias
características definitorias.

Jav aScript es un lenguaje que diferencia entre may úsculas y minúsculas, por lo que si escribimos alguna expresión en
minúsculas, deberemos mantener esa expresión en minúsculas a lo largo de todo el programa. Si escribimos esa misma
expresión en may úsculas, será una expresión diferente a la primera. Esto es así en la may oría de los lenguajes de este tipo,

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 2/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

como PHP.

Otra característica es que podemos encerrar las expresiones que escribamos con una serie de caracteres especiales. Estos
caracteres se denominan operadores y sirv en tanto para encerrar expresiones como para realizar trabajos con ellas, como
operaciones matemáticas o de texto. Los operadores que permiten encerrar expresiones deben abrirse siempre. '(', '{' y '[' y
deben cerrarse con sus correspondientes ')', '}' y ']', respectiv amente.

Como Jav aScript es un lenguaje de formato libre, podemos escribir las líneas de código de la forma que consideremos mejor,
aunque por supuesto debemos escribir siempre de la forma correcta. Por ejemplo, podemos escribir las líneas con un número
v ariable de espacios:

variable = "hola";
variable="hola";
variable ="hola";
variable= "hola" ;

Esto significa que podemos añadir tabuladores al inicio de la línea para justificar los párrafos de código. También podemos
romper las líneas de texto si son demasiado largas:

document.write("Muy \
buenas");

Pero no podemos hacer esto:

document.write \
("Muy buenas");

Sólo podemos romper cadenas de texto, no instrucciones.

En ocasiones tenemos que escribir algunos caracteres especiales llamados "de escape", porque en ocasiones hay que utilizar
algunos caracteres no imprimibles, como por ejemplo:

document.write ("Tú y yo somos \"programadores\".");

Podemos v er que al introducir comillas dobles dentro de la cadena de caracteres, debemos añadir la barra inv ertida '\' para
escapar las propias comillas, aunque esta misma expresión se podía haber escrito así:

document.write ("Tú y yo somos 'programadores'.");

Otro aspecto importante de Jav aScript es la necesidad o no de utilizar el punto y coma ';' al final de las instrucciones. Este
operador sólo sirv e para delimitar las instrucciones, pero aunque su uso es obligatorio en la may oría de los lenguajes, es
opcional en Jav aScript. Si usamos este operador, podemos incluir v arias sentencias en la misma línea de código, y si no lo
usamos, sólo podemos escribir una sentencia cada v ez. De todas formas, aconsejamos usar el punto y coma porque en otros
lenguajes como PHP o Jav a, este operador es obligatorio.

Las variables en JavaScript

En un programa Jav aScript podemos encontrar con dos elementos básicos: código y datos. La parte del código es la que nos
permite hacer cosas dentro de la página web, y la parte de datos es la que define el estado de la página web en un momento
determinado. Los datos de un programa se guardan dentro de v ariables.

¿Qué es una v ariable? Una v ariable es como una caja: dentro de una caja nosotros podemos guardar cosas. Sólo que en las
v ariables de Jav aScript la caja sólo puede guardar una sola cosa a la v ez. ¿Y por qué se las llama v ariables? Se las denomina así
porque su contenido puede cambiar en cualquier momento durante el desarrollo del programa. De esta forma, una v ariable en
Jav aScript puede contener distintas cosas según donde se encuentre en el programa: números, letras, etc...

Tipos de datos en JavaScript

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 3/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Existen cuatro tipos básicos:

Números (enteros, decimales, etc.).

Cadenas de caracteres.
Valores lógicos (True y False).
Objetos (una ventana, un texto, un formulario, etc.).

Declaración de variables
A continuación aparece un ejemplo de declaración de una v ariable en Jav aScript:

var miVar = 1234;

Aquí hemos definido una v ariable numérica con un v alor entero. Pero también podríamos definir un número con decimales:

var miVar = 12.34;

Como podemos v er, la nuev a v ariable usa el operador ‘.’ (punto) para distinguir entre la parte entera y la parte decimal. Esto es
importante, porque no podemos usar la coma como hacemos en España.

Si queremos definir una cadena de caracteres, lo podemos hacer de la siguiente manera:

var miCadena = 'Hola, mundo';

// o bien:

var miCadena = "Hola, mundo";

Aquí v emos que podemos usar los dos tipos de comillas para crear cadenas de caracteres, y será muy útil cuando trabajemos
con ello (podemos incluso combinarlas dentro de la misma cadena).

También podemos crear v ariables con v alores lógicos. Eso significa que la v ariable podrá tener sólo dos v alores: v erdad o
mentira.

var miVar = true;

Los v alores admitidos para este tipo de v ariables son true y false. Este tipo de v ariables nos v endrán muy bien para crear
condiciones y como v alor para dev olv er en funciones, que v eremos más adelante.

Y por último tenemos un tipo de dato especial: los objetos. ¿Y qué son los objetos? Son "cosas" que podemos usar en nuestro
programa para representar "entidades". Esto lo entenderemos muy fácilmente con unos ejemplos.

Estamos rodeados de objetos: mesas, libros, monitores, ratones, cuadros, etc... Algunos son más simples y otros son más
complicados. Podemos manipular todos ellos según sus características y su forma de interactuar con el entorno donde están.
Por ejemplo, una mesa sabemos que tiene cuatro patas, una tabla lisa, y que es de un color o v arios colores. Es decir, que
podemos determinar una mesa por sus propiedades o atributos. Pero además, con la mesa podemos hacer cosas: podemos
poner cosas encima, podemos usarla para comer o leer y a v eces podemos colgar cosas de ellas, por ejemplo en un rev istero.
Todo eso son métodos o comportamientos que la mesa tiene para interactuar con el resto de su entorno.

Pues bien, podemos decir que los objetos en Jav aScript son muy parecidos: tienen propiedades (datos) y m étodos (código).
Podemos crear y usar objetos para manejar elementos del nav egador web: una v entana del nav egador es un objeto window,
una página HTML es un objeto document, y una imagen es un objeto de tipo Image. Es fácil darse cuenta de que los objetos son
de un determinado tipo: un objeto mesa, un objeto v entana, un objeto ratón, etc... Todos los objetos de un mismo tipo tienen
características semejantes, aunque luego cada objeto tiene propiedades con v alores distintos dependiendo de cada caso. Así,
dos mesas puede tener color marrón o azul, pero las dos seguirán teniendo patas, que pueden ser 4 ó 5, depende... En
Jav aScript, los objetos son muy importantes, como v amos a comprobar en el siguiente capítulo, que trata de los array s
(matrices) y las sentencias de control.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 4/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Operar con variables

Como y a estudiamos en el capítulo anterior, en Jav aScript podemos definir unos elementos llamados v ariables que nos
permiten almacenar datos de distintos tipos. Naturalmente, nosotros podemos usar esos datos en nuestros programas y , como
y a se indicó entonces, podemos incluso v ariar esos datos manteniendo la v ariable donde los depositamos. A esta operación se
le llama modificar la v ariable, y es una de las bases de la programación moderna.

Las v ariables podemos usarlas en multitud de situaciones, al mostrar datos, al env iarlos y recibirlos, en expresiones y
llamadas a funciones... Podemos tratar con v ariables para almacenar los datos que v amos a usar a lo largo del programa, tanto
globalmente en toda la aplicacion como de forma exclusiv a con las funciones que creemos, como v eremos en el capítulo
correspondiente.

var numero = 1;
numero = numero + 2;
numero += 3;

El resultado final de esta operación sera que la v ariable numero será igual a 6. En la primera línea lo que hemos hecho es
declarar la v ariable numero con el v alor inicial 1. Despues, hemos incrementado el v alor de la v ariable con la misma v ariable,
sumándole 2, y posteriormente hemos v uelto a incrementar la v ariable sumándole 3 por medio del operador tipográfico +=.
Los operadores se encuentran en el primer apéndice del curso.

Sin embargo, surge un pequeño problema cuando tenemos que tratar con cantidades may ores de datos. Las v ariables como
tales sólo nos permiten gestionar un dato cada una de ellas, con lo que cuando tenemos que gestionar grupos may ores de
datos, se hace realmente complicado. Miremos el siguiente ejemplo, en el que definimos unos nombres:

var nombre1 = 'pepe';

var nombre2 = 'toño';
var nombre3 = 'mari';
var nombre4 = 'lucas';
var nombre5 = 'sonia';
var nombre6 = 'ruth';
var nombre7 = 'tete';

Si ahora quisiéramos listar estos datos (más adelante v eremos cómo), tendríamos que referirnos a cada v ariable en concreto,
con lo que tenemos pululando por nuestro programa siete v ariables a las que será difícil referirnos de una forma genérica (por
ejemplo, como estudiaremos más adelante, para listarlos dinámicamente en un formulario). Para resolv er este problema
tenemos una solución: los array s (matrices).

Arrays (Matrices)
Las matrices son v ariables que contienen un objeto de tipo Array. Podemos definir una matriz de la siguiente manera:

var matriz = new Array();

De esta forma, hemos creado una matriz v acía que puede contener un numero ilimitado de elementos, tantos como nos
permita el sistema donde se ejecuta. Las matrices v ienen a ser como cajas que en v ez de contener una sola cosa, contienen
muchas, como si pudiéramos div idir la caja en compartimentos en los cuales pudiéramos ir depositando cosas.

Además, podemos crear matrices con una "dimensión", es decir, que podemos hacer que la matriz se inicie con un número de
elementos determinado:

var matriz = new Array(15);

Con esta instrucción, lo que hemos hecho es crear una matriz de quince elementos. Pero ahora lo interesante es saber cómo
llamar a esos elementos, y a que si creamos la matriz, pero no sabemos operar con ella, no sirv e para mucho, ¿no? La forma de
acceder a un elemento de la matriz es la siguiente:

elemento = matriz[1];

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 5/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

En este ejemplo, la v ariable elemento contendrá el v alor del elemento 1 de la matriz. Es lo que se llama índice de la matriz, e
identifica a cualquiera de los elementos de la matriz. Hay que fijarse en que utilizamos los corchetes "[]" para señalar un
elemento de la matriz. El primer elemento de la matriz es el de índice ‘0’, no el de índice ‘1’. Así, para el anterior ejemplo de una
matriz de 15 elementos, el último elemento posible es el 14.

De la misma forma, podemos dar un v alor a cualquiera de los elementos de la matriz:

matriz[5] = ‘hola’;

Hemos asignado el v alor hola al elemento 5 de la matriz. Los elementos de una matriz pueden contener cualquier tipo de dato,
y se pueden cambiar en cualquier parte del programa, al igual que ocurre con las v ariables.

¿Y si queremos saber cuántos datos tenemos en la matriz? Como dijimos antes, las matrices son objetos de tipo Array , y los
objetos pueden tener atributos (datos) y funciones (código). El atributo que debemos usar con matrices es length:

longitud = matriz.length;

De esta forma, podemos saber cuantos elementos tiene la matriz. Recordad que como el primer índice es ‘0’, el último
elemento será siempre matriz.length - 1.

Si necesitamos que la matriz contenga más elementos, podemos redimensionar la matriz aplicándole un nuev o objeto de
matriz:

matriz = new Array(longitud que queramos);

Sin embargo, perderemos todos los elementos que tuv iéramos anteriormente.

Sentencias de control
Una v ez que nos sabemos manejar con v ariables y matrices, que son los datos de nuestros programas, debemos aprender a
crear código, que es lo que hace que nuestro programa funcione.

Hasta ahora hemos v isto cómo manejar los datos del programa, pero sólo con v ariables no podemos manejar un programa.
Necesitamos escribir código fuente que nos permita conseguir que el programa haga cosas. Normalmente los programas tienen
un flujo de ejecución: se ejecuta línea a línea, interpretándolas y comprobando el resultado de la ejecución. Pero a v eces eso no
es suficiente. A v eces tenemos que controlar lo que hace el programa, permitiéndonos ejecutar un código u otro dependiendo
de las circunstancias, o bien repetir el mismo código v arias v eces según unas condiciones concretas.

Cuando nos lev antamos por la mañana, miramos por la v entana para decidir qué ropa nos ponemos. Decidimos entre una
camisa blanca o un jersey azul dependiendo de si hace frío o no:

Si hace frío -> me pongo el jersey.

Si hace calor -> me pongo la camisa.

Condicionales
If
En un programa podemos realizar el mismo tipo de decisiones gracias a la instrucción if:

if (condición) {
código_A
}
else {
código_B
}

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 6/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Veamos lo que tenemos aquí. Primero, comprobamos la condición en la que v amos a basar nuestra decisión (v eremos más
adelante cómo crear condiciones). Si la condición es v álida (si es v erdadera), se ejecutará el primer bloque de código que está
entre llav es ({}); si no, se ejecutará el siguiente bloque de código, el que se encuentra debajo de la palabra else. Es decir, si la
condición es v erdadera, ejecutamos código_A, y si no, código_B.

De esta forma, podemos tomar decisiones simples que nos permiten cambiar el código que ejecuta el nav egador, de forma que
podemos controlar su ejecución fácilmente. Un ejemplo es este:

var edad = 18;

if (edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Eres menor de edad");
}

Primero definimos la v ariable edad con el v alor numérico 18. Después comprobamos si el sujeto es o no may or de edad
ley endo el v alor de la v ariable: si edad es may or o igual que 18, entonces le decimos que es may or de edad; si no, le decimos
que es menor de edad.

alert es una función de Jav ascript que nos permite mostrar un mensaje en pantalla.

Pero, ¿qué ocurre cuando queremos hacer v arias comprobaciones al mismo tiempo? Entonces podemos usar la instrucción
else if.

if (edad > 18) {

alert("Tienes más de 18 años");
}
else if (edad == 18) {
alert("Tienes 18 años");
}
else {
alert("Tienes menos de 18 años");
}

De esta forma, podemos extender las condiciones todo lo que queramos para cubrir todos los casos necesarios. Hay que
destacar que todas las condiciones son sucesiv as y que sólo se ejecuta una de ellas. Además, el último else es el que se ejecuta
en el caso de que ninguno de los if anteriores sea v álido.

Switch
Hemos v isto cómo gracias a if-else podemos decidir qué hacer en determinadas situaciones. Pero a v eces sólo querremos
decidir entre unos v alores, y ejecutar código dependiendo de los posibles v alores de una v ariable o dev ueltos por una función.
Para no ensuciar tanto el codigo usando muchas sentencias if podemos usar la sentencia switch-case:

switch (variable) {
case valor1:
// codigo para valor 1
break;
case valor2:
// codigo para valor 2
break;
case valor3:
case valor4:
case valor5:
// codigo para valor 3, valor 4 y valor 5
break;
default:
// código si no es ninguno de los anteriores
}

En este ejemplo, comprobamos v arios v alores de la v ariable variable, de forma que cada uno de ellos permite ejecutar un
código diferente dependiendo de la situación. Ahora bien, si nos fijamos en valor3, valor4 y valor5, comprobamos que sólo se
ejecutará el código que aparece bajo valor5, porque los otros v alores están v acíos, pero también porque no tienen una
cláusula break. Esta palabra reserv ada corta la ejecución del código Jav ascript en el punto en que aparece, saliendo del
bloque de código en el que se encuentra. Esto también nos serv irá, por ejemplo, cuando v eamos bucles.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 7/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Con esto, comprobamos que switch nos puede ay udar a ejecutar código de forma condicional, pero sin las complicadas
operaciones que debemos realizar en if. Sin embargo, switch no puede nunca sustituir a if, situación que a la inv ersa sí ocurre.

Operadores lógicos y relacionales

Para crear condiciones, debemos usar dos elementos nuev os: los operadores lógicos y los operadores relacionales. Los
operadores lógicos son 3:

Operador Significado
&& Y
|| O
! NO
Y los relacionales son:

Operador Significado
== Equivalencia
< Menor que
> Mayor que
<= Menor o igual que
>= Mayor o igual que
!= Distinto de
Podemos crear condiciones simples usando los operadores relacionales, y después formar condiciones más complejas
juntando otras más simples usando los operadores lógicos. Por ejemplo:

if (edad > 6 && edad < 12) alert("Eres un niño");

else if (edad >= 12 && edad < 18) alert("Eres un adolescente");
else if (edad >= 18 && edad < 31) alert("Eres un joven");
else if (edad >= 31 && edad < 60) alert("Eres un adulto");
else if (edad >= 60 alert ("Eres un adulto mayor");
else alert ("Tu debes de ser un bebé no mayor de 6 años");

Aquí hemos anidado v arias condiciones para poder mostrar mensajes dependiendo de la situación en que nos encontremos.
Podemos v er cómo es posible tomar decisiones más complejas que las que v eíamos al principio del tema juntando v arias
condiciones por medio de los operadores lógicos. Debemos usar && (AND lógico) cuando queramos que la resolución de la
condición se encuentre incluida en las dos condiciones que indicamos. Debemos usar || (OR lógico) cuando queramos que la
resolución de la condición no se incluy a en las condiciones que usamos. Así, cuando decimos que (edad >= 31 || edad <= 6),
estamos indicando que el resultado ha de ser o bien may or de 31 o menor de 6, pero nunca se encontrara en las dos
condiciones a la v ez, al contrario que con && (que indica que se tienen que cumplir las dos condiciones a la v ez para que sea
v erdad). De esta forma, podemos tomar decisiones que nos permitirán controlar el flujo del programa.

Bucles
En programación, la función principal de un programa es aquella que es ejecutada para que sus instrucciones sean realizadas,
bien por el procesador central (en el caso de un lenguaje compilado como C o Pascal), o por un intérprete, que es un
intermediario entre el programa y el procesador central. De esta forma, la ejecución lineal de las instrucciones genera
acciones, cosas que nuestro programa hace porque se lo hemos indicado. Ahora bien, ¿Qué ocurre cuando queremos hacer
v arias v eces una misma cosa? Tendríamos que escribir el mismo código v arias v eces, aunque el problema sería más peliagudo
si encima el número de v eces a ejecutar el código fuera v ariable, cambiase según el estado del programa (definido por las
v ariables). Para ello tenemos dos tipos de elementos fundamentales: bucles y funciones.

Un bucle permite repetir v arias v eces el mismo código en la misma situación, incluso aunque la repetición de ese código sea
v ariable y no la misma cantidad de v eces cada v ez. Como estudiaremos luego, tenemos a nuestra disposición dos bucles, for y
while. En el caso de Jav aScript, los bucles son condicionales, es decir que, como en el caso de if, necesitamos de condiciones

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 8/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

como las que hemos estudiado para realizar las repeticiones de código. En otros lenguajes de programación existen bucles
incondicionales, lo que significa que sólo pueden ir de cierto punto a cierto punto (por ejemplo, para contar de 1 a 10, aunque
esto, como v eremos, también lo podemos hacer con los condicionales).

Por último, las funciones son elementos esenciales en programación por dos motiv os: permite reutilizar el código de nuestro
programa no sólo en el mismo programa, si no en otros posteriores, y además, permite estructurar las aplicaciones de forma
que podamos div idir el problema en otros más pequeños. De ahí que a la programación con procedimientos y funciones se la
llame estructurada (y no funcional como suelen indicar algunos neófitos: la programación funcional, que existe, es totalmente
diferente de la programación con funciones). Veremos cómo reunir código en porciones llamadas funciones y usarlo v arias
v eces en otras partes del código de nuestros programas.

For
Un bucle for nos permite repetir un bloque de código según unas condiciones concretas, siempre que estas sean v erdaderas.
Un bucle for tiene tres partes:

inicialización: en esta parte, debemos indicar las variables que vamos a usar en la condición. Lo más habitual es declarar
variables numéricas, pero pueden ser perfectamente cadenas de caracteres, booleanos u objetos.
condición: una o varias condiciones (unidas por operadores lógicos), que deciden el número de iteraciones del bucle.
operación: una expresión que normalmente (aunque no es imprescindible) modificará las variables definidas en la primera parte.
Un ejemplo simple de bucle for sería:

for (x = 1; x < 10; x++)

{
document.write("El número es " + x + "<br>");
}

Vamos a analizar este ejemplo. Fijémonos en la primera linea, donde podemos encontrar las tres partes que indicábamos
antes:

x = 1 (inicialización): aquí usamos una variable x y le asignamos el valor 1, que será el valor de inicialización del bucle.
x < 10 (condición): nos encontramos con una condición muy simple, y que se leería como: "si x tiene un valor menor que 10, la
condición es válida". Si la condición es válida, el bucle seguirá ejecutandose invariablemente. Veremos que eso puede generar un
pequeño "problema", que a veces podemos incluso aprovechar para nuestros propósitos, el denominado "bucle infinito".
x++ (operación): aquí nos encontramos con una operación matemática usando un operador tipográfico "++", que viene a ser la
misma operación que "x = x + 1". De hecho, también podemos usarla en vez de la que aparece, pero lo normal es que usemos un
operador como éste (de hecho, si estudiamos código realizado por otros, veremos que es la forma más común).
Por tanto, el bucle for puede leerse como: "iniciamos 'x' con valor 1; el bucle se ejecutará mientras el valor de 'x' sea menor
que 10, y cada vez que se ejecute el bucle el valor de 'x' se incrementará en 1"

Modificación de la variable de control dentro del bucle

A continuación podemos v er un ejemplo de cómo podemos usar la v ariable de control del bucle dentro de éste:

for (x = 1; x < 16; x++)

{
if (x % 2) {
x++;
}
document.write('Mi número es ' + x + '<br>');
}

Podemos apreciar en este ejemplo que el resultado no es el aparentemente esperado para este bucle, dado que aunque en la
parte de operación incrementamos la v ariable sólo en 1, el resultado final es que sólo v emos números pares en la v entana. ¿Por
qué? Fijémonos en el código del bucle:

el condicional if sólo será cierto en el caso de que el módulo de 'x' (la operación matemática de 'resto', representada por el
operador '%') devuelva como resultado un valor impar.
si la condición de if se cumple, se ejecutará un trozo de código que incrementará el valor de 'x' en uno, influyendo de esta forma en
el desarrollo del bucle.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 9/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

De esta forma, en v ez de mostrar los v alores numéricos del 1 al 15, como sería en el caso normal, resulta que aparecen sólo
v alores pares. El truco en este código es sibilino pero potente: la operación 'x % 2' dev olv erá un 0 si 'x' es par, pero dev olv erá
un v alor distinto si es un número impar. ¿Esto que significa? Si el v alor de la operación es cero, la condición es falsa (es un
comportamiento muy habitual en muchos lenguajes de programación), con lo que la condición sólo será v erdadera cuando 'x'
sea impar. Un número impar dev olv erá un módulo may or que cero al div idirlo entre 2. Al incrementar un v alor impar en 1, se
conv ierte en un v alor par, que es lo que finalmente v emos en pantalla.

Parece enrev esado, pero un estudio a fondo de este código nos permite apreciar algunas de las propiedades ocultas de la
programación en Jav aScript. Muchas de estas propiedades y características se aprenden con la experiencia, pero en este curso
v eremos algunas de ellas que nos serán útiles en nuestro trabajo futuro.

Bucles anidados
Podemos anidar v arios bucles uno dentro de otro, como en este caso:

for (x = 1; x < 10; x++)

for (y = 1; y < 10; y++)
document.write(x + ":" + y);

En este ejemplo, v emos que un bucle se ejecutará dentro del otro mostrándonos los v alores de forma ordenada. No es preciso
escribir llav es si el código a escribir es de una sola linea.

Bucles infinitos
Vamos a v er rápidamente cómo realizar un bucle infinito con for:

for (;;)
{
document.write("Esto no se acaba nunca...");
}

Esto genera un pequeño problema... Si este bucle se ejecuta constantemente... ¿Qué hacemos para detenerlo o controlarlo? Se
pueden utilizar dos palabras para controlar un bucle (sea cual sea), y a sea finito o infinito: break y continue.

Sin embargo, LAS BUENAS PRÁCT ICAS DE PROGRAMACIÓN DESACONSEJAN T OT ALMENT E EL USO EN
CUALQUIER LENGUAJE DE PROGRAMACIÓN DE LAS SENT ENCIAS break Y continue COMO MECANISMO
DE CONT ROL DEL FLUJO DEL PROGRAMA.

break es la palabra reserv ada para cortar un bucle en un momento determinado. Es muy usada en condicionales if, y a que al
darse una cierta condición, podemos controlar un bucle cortándolo cuando se dé un cierto momento concreto.

continue, sin embargo, también corta la ejecución del bucle, pero no igual que break. Mientras que break finaliza
definitiv amente el bucle, continue salta lo que queda de bucle y sigue la siguiente iteración (repetición) sin más.

var x = 1;
for (;;)
{
x++;
if (x > 5) break;
document.write(x + '<br>');
}

En este ejemplo v emos que, cuando el v alor de x sea may or de 5, el bucle se romperá. En este otro nos permite apreciar el
resultado de usar continue:

for (x = 1; x < 10; x++)

{
if (x % 2) continue;
document.write(x + '<br>');
}

Y a nos podemos imaginar el resultado.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 10/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

For sobre listas

Un caso particularmente útil es la utilización de bucles for para recorrer los elementos de una lista (o array ). Podemos utilizar
la sintaxis anterior recorriendo el array como en el siguiente ejemplo:

var lista = ["elemento1","elemento2","elemento3"];

for (idx=0; idx<lista.length; idx++)
{
elemento_n = lista[idx];
alert(elemento_n);
}

Sin embargo dado que su uso es tan habitual existe una sintaxis abrev iada que v eremos frecuentemente al consultar código
jav ascript en Internet:

var lista = ["elemento1","elemento2","elemento3"];

for (elemento_n in lista) {
alert(elemento_n);
}

elemento_n tomará sucesiv amente todos los v alores de la lista (array ) sin necesidad de utilizar un índice (idx), haciendo el
código más compacto.

While
El bucle while, al igual que el bucle for, también es condicional, aunque mucho más simple que éste, como v emos en el
siguiente ejemplo:

var x = 1;
while (x < 10)
{
document.write("Mi número es: " + x + "<br>");
x++;
}

Como v emos, este bucle es idéntico al bucle for que estudiamos en el apartado anterior pero mucho más simple.

¿Para qué hay dos bucles que al fin y al cabo hacen los mismo? En el pasado, for era un bucle incondicional, es decir, que sólo
podía ir de cierto punto a cierto punto, sin comprobaciones intermedias. Por eso se desarrolló el bucle while. Sin embargo,
lenguajes más av anzados como C crearon un for condicional más potente. Aunque realiza funciones semejantes, while tiene
como v entaja que, al ser más simple, también es más rápido y eficaz en términos de rendimiento que for. Además, algunas
operaciones resultan simplificadas:

while (verdad)
{
if (verdad) document.write("Es verdad");
verdad = !verdad;
}

Este extraño ejemplo es significativ o por el uso de v ariables lógicas o booleanas. verdad es una v ariable lógica que sólo puede
tener los v alores true y false. Si verdad es true, el bucle se ejecutará. Al ejecutarse, también se comprobará la condicion
interna y se imprimirá el mensaje "Es v erdad". Lo interesante v iene después. La expresión verdad = !verdad significa "hacer
que verdad sea contrario a verdad". Si verdad era igual a true, ahora será igual a false (el operador !, como sabemos, es la
negación, y por lo tanto, cambiará el v alor de la v ariable a su contrario).

while tiene una v ersión inv ersa: do-while. Este bucle tiene como diferencia respecto de while que, mientras que en while la
condición se comprueba incluso antes de comenzar a ejecutar el bucle (lo que implica que si la condición y a fuese falsa antes
de entrar en el bucle, éste no llegaría a ejecutarse nunca), en do-while la condición se comprueba a posteriori, con lo que
tenemos la oportunidad de ejecutar el bucle al menos una v ez. Esto también es una v entaja con respecto a for, que en ese
sentido se comporta igual que while. Veamos un ejemplo:

var x = 0;

do

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 11/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
{
document.write("Mi número es el " + x + "<br>");
x++;
} while (x < 10);

Funciones
¿Qué son las funciones?
Las funciones son uno de los elementos más importantes de cualquier lenguaje de programación actual. De hecho, Niklaus
Wirth, uno de los más importantes teóricos de la programación y creador del lenguaje Pascal entre otros, llegó a indicar que
todo programa no era más que la suma de código (rutinas, procedimientos o funciones, como se les quiera llamar) y datos
(v ariables, matrices, etc...). Sea como sea, las funciones tienen un papel estelar en el desarrollo de aplicaciones en la
actualidad.

Hasta ahora, hemos v isto como realizar código de una forma estructurada, con sentencias de control que nos permiten
dominar la ejecución del mismo fácilmente. Pero si sólo tenemos esto, solamente podremos manejar el código de forma lineal:
ejecutaremos las líneas una a una, una detrás de la otra, hasta el final del programa. Es más, si quisiéramos usar un
determinado código v arias v eces en el mismo programa tendríamos que repetir ese código v arias v eces, teniéndolo que
adaptar a cada situación. ¿Y qué ocurre si queremos reutilizar un código en v arios programas? Es un problema que se
resuelv en gracias a las funciones.

Las funciones son trozos de código que tienen un nombre y que podemos utilizar en cualquier parte de nuestro código con una
llamada directa. Este es un buen ejemplo:

function datos_personales(nombre, apellidos, edad)

{
return "Hola, " + nombre + " " + apellidos + ", tienes " + edad + " años.";
}

En este caso hemos definido una función que, usando los parámetros que le hemos pasado, los combina para formar una
cadena formateada, que dev uelv e gracias a la palabra reserv ada return. ¿Y cómo podemos usar este código?

alert(datos_personales('Pepito', 'Pérez', 25));

De tal forma que primero ejecutaremos la función datos_personales con los parámetros pasados, y después la función alert,
que nos permite mostrar una v entana con un mensaje en la pantalla, con el resultado dev uelto por la función que hemos
creado. Este sería el código completo del programa:

<html>
<head>
<title>código de función</title>
<script>
function datos_personales(nombre, apellidos, edad)
{
return 'Hola, ' + nombre + ' ' + apellidos + ', tienes ' + edad + ' años.';
}
</script>
</head>
<body>
<script>
alert(datos_personales("Pepito", "Perez", 25));
</script>
</body>
</html>

Los parámetros son un elemento importante en las funciones. Se trata de datos que podemos pasar a nuestras funciones para
que estas los procesen de alguna forma, lo cual dará como resultado o una salida en el nav egador (texto o v entanas), o bien un
resultado que se puede usar cuando llamemos a la función. Cuando indiquemos parámetros, deberemos indicar la lista
completa de parámetros que v amos a usar en esa función. Al llamar a la función, deberemos hacerlo con todos los parámetros
indicados. De otra forma, se produciría un error de ejecución. Los parámetros se conv ierten en v ariables de datos dentro de la
función, de ahí que podamos utilizarlas e incluso modificarlas.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 12/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Generalmente, las funciones se utilizan para realizar alguna operación no v isible (matemática, de cadena de caracteres, de
objetos, etc...) que dev uelv e por medio de return, pero también se pueden v isualizar elementos en el nav egador usando las
funciones y objetos que y a incorpora Jav aScript.

function suma(dato1, dato2)

{
return dato1 + dato2;
}

Al utilizar esta función, podemos hacerlo de v arias formas:

var total = suma(1,2); // 3

alert(suma(7,43)); // 50
document.write(total + suma(54,-7)); // 50

A lo largo de los siguientes capítulos v eremos como crear y utilizar funciones, tanto propias como ajenas. Recordemos que
podemos incluir código desde otro archiv o y por supuesto, ese código puede contener funciones. En el siguiente capítulo
v eremos más ejemplos de funciones y av anzaremos en funciones internas de Jav aScript.

Funciones con parámetros

Como y a indicamos en el capítulo anterior, los parámetros nos sirv en para llamar a nuestras funciones con unos datos
específicos para que los procese. Y en cada llamada, podemos darle unos parámetros diferentes, que harán que pueda
comportarse de forma diferente, si ese es el comportamiento que le hemos programado.

var numero = 1;
var cadena = "Hi!";
var logico = true;

function valores(num, cad, log)

{
document.write(num);
document.write(cad);
document.write(log);
}

valores(numero, cadena, logico);

Esta función la estamos llamando con v ariables como parámetros, pero también podemos llamar a la función con v alores
literales, es decir, v alores simples directos:

valores(2, "adiós", false);

Como y a v imos en el capítulo anterior, también podemos hacer que otra función sea un parámetro:

valores(3, "que tal".length, true);

"que tal".length es una función que forma parte de los objetos de cadena de texto (todo, desde las v ariables hasta los literales,
son objetos en Jav aScript), y nos dev uelv e la longitud de una cadena de texto. En concreto, al hacer esta llamada nos
dev olv erá un número '7 '. Como las v ariables en Jav aScript no tienen tipo (todas son objetos), podemos pasar cualquier v alor
como parámetro.

Devolución de datos
Como y a sabemos, una función puede dev olv er datos hacia afuera por medio de la expresión return. Naturalmente, podemos
dev olv er cualquier tipo de datos. Sin embargo hay que tener en cuenta una serie de cuestiones:

Siempre se devuelven objetos, como ya hemos visto, y por lo tanto podemos devolver un objeto creado en la misma función.
Normalmente, cuando creamos una variable dentro de una función, esta variable existe sólo para esa función, y desaparece en el
momento en que la función termina (la variable se encuentra en la pila de memoria, y cuando la función desaparece, también lo
hace la pila); pero en el caso de que devolvamos el objeto, no se devuelve exactamente la misma variable, si no que se devuelve su
contenido.
Cuando devolvemos true ó un valor distinto que cero, para JavaScript es lo mismo, y si devolvemos false o 0, también viene a ser lo
mismo. Esta es una regla estándar para muchos lenguajes como JavaScript, Java, PHP, Perl, etc...

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 13/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

No es preciso que una función devuelva nada. No es necesario usar return. Además, también es posible que en vez de devolver
resultados, se modifiquen variables globales, es decir, variables creadas fuera de la función y que se usan dentro.
Si queremos salir de una función antes de tiempo, porque algo ha fallado o no hay nada que hacer en un caso específico,
podemos simplemente escribir "return;", lo que nos permitirá salir sin más y no devolver ningún valor.
Estas consideraciones son importantes a niv el general y es importante tenerlas en cuenta. Vamos a v er como funcionan con
algunos ejemplos:

function dev_variable()
{
variable = true;
return variable;
}

var var1 = dev_variable();

Como v emos, hemos declarado una v ariable local a la función y la hemos dev uelto, pero solo se dev uelv e realmente el v alor.
Esto pasa en todos los casos (Nota técnica: cuando se dev uelv e un objeto, se dev uelv en sus datos en forma de objeto de esa
clase; esto lo entenderemos mejor en el capítulo siguiente). Veamos este otro ejemplo:

function dev_true() {
return true;
}

if (dev_true()) {
alert("es true");
}

if (true) {
alert("también es true");
}

if (1)
{
alert("este también es true");
}

Por último, v eamos cómo salir de una función sin necesidad de dev olv er nada en cualquier momento:

function salir()
{
document.write("hola");
document.write("que pasa");
return;
alert("adiós");
}

salir();

En este ejemplo, la última linea dentro de la función (alert) no se ejecutará nunca porque hemos salido sin más en la linea
anterior al ejecutarse la instrucción return.

Funciones recursivas
Las funciones recursiv as son aquellas que se llaman a sí mismas. Existen multitud de técnicas para desarrollar este tipo de
funciones, y a que sus usos son muy div ersos, pero fundamentalmente hay que tener en consideración que son funciones
peligrosas, porque si no controlamos su ejecución, se estarán ejecutando indefinidamente, como en el caso de los bucles
infinitos. La diferencia con los bucles infinitos es que dependiendo de la implementación del intérprete de Jav aScript, es
posible que rompamos la pila de memoria, que y a v imos antes, con lo que además de colgar el nav egador, podemos generar
una excepción de memoria y un error grav e del sistema. Para ev itarlo, claro está, debemos estudiar bien la lógica de la función
para construirla adecuadamente. Por ejemplo, si queremos calcular el factorial de un número, podemos hacerlo con una
función recursiv a:

function factorial(numero)
{
if (numero == 1 || numero == 0)
return 1;
else
return numero*factorial(numero - 1);
}

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 14/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

document.write(factorial(4));

Supóngase la llamada a esta función para N=4, es decir factorial(4). Cuando se llame por primera v ez a la función, la v ariable
numero v aldrá 4, y por tanto dev olv erá el v alor de 4*factorial(3); pero factorial(3) dev olv erá 3*factorial(2); factorial(2) a su
v ez es 2*factorial(1) y dado que factorial(1) es igual a 1 (es importante considerar que sin éste u otro caso particular, llamado
caso base, la función recursiv a no terminaría nunca de llamarse a sí misma), el resultado final será 4*(3*(2*1)).

Funciones en JavaScript
Jav aScript contiene sus propias funciones que podemos utilizar en nuestros programas. Aunque algunas de estas funciones
podemos usarlas independientemente de sus correspondientes objetos, lo cierto es que todas las funciones prov ienen de algún
objeto específico. El objeto window representa a la v entana del nav egador y es el objeto por defecto. Esto quiere decir que
podemos usar sus elementos (funciones, propiedades, objetos, etc...) sin necesidad de llamar explícitamente al objeto
window.

Y a conocemos alguna que otra función como length (de los objetos de matriz) o alert, que prov iene del objeto window y que
muestra un mensaje en una v entana.

Otro objeto dependiente de window es docum ent que contiene, entre otras cosas, funciones como write que nos permite
escribir texto en la página web.

A continuación v amos a estudiar algunas posibilidades que nos aportan las funciones en Jav aScript, y a que hay una gran
cantidad de ellas. Sin embargo, v amos a repasar las más usadas para el desarrollo web en general.

Mostrar ventana de confirmación (aceptar o cancelar)

<html>
<head>
<script type="text/javascript">
function ver_confirm()
{
var name=confirm("Pulsa un botón")
if (name==true) {
document.write("Has pulsado el botón Aceptar");
}
else {
document.write("Has pulsado el botón Cancelar");
}
}
</script>
</head>

<body>
<form>
<input type="button" onclick="ver_confirm()" value="Mostrar ventana confirmación">
</form>
</body>
</html>

Abrir una ventana nueva

<html>
<head>
<script language="javascript">
function open_win()
{
window.open("http://www.google.es","nueva","toolbar=yes, location=yes,
directories=no, status=no, menubar=yes, scrollbars=yes,
resizable=no, copyhistory=yes, width=400, height=400");
}
</script>
</head>

<body>
<form>
<input type="button" value="Abrir ventana" onclick="open_win()">
</form>
</body>
</html>
https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 15/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

El primer parámetro de open es la dirección que queremos mostrar en la v entana. El segundo es el nombre que queremos
darle a la v entana (y que podemos usar, por ejemplo, en el atributo target de los enlaces). El tercer y último parámetro nos
permite definir el aspecto de la v entana según los datos que le indicamos.

Cambiar la URL actual

El siguiente ejemplo nos muestra el uso de location para conseguir la dirección de la página actual en la que nos encontramos
o bien ir a una página diferente:

<html>
<head>
<script type="text/javascript">
function actual_location()
{
alert(location);
}
function cambiar_location()
{
window.location="http://www.google.es/";
}
</script>
</head>

<body>
<form>
<input type="button" onclick="actual_location()" value="Mostrar la URL actual">
<input type="button" onclick="cambiar_location()" value="Cambiar URL">
</form>
</body>
</html>

Imprimir una página

<html>
<head>
<script type="text/javascript">
function printpage()
{
window.print();
}
</script>
</head>

<body>
<form>
<input type="button" value="Imprime esta página" onclick="printpage()">
</form>
</body>
</html>

Cambiar el tamaño de la ventana actual

<html>
<head>
<script type="text/javascript">
function resizeWindow()
{
window.resizeBy(-100,-100)
}
</script>
</head>

<body>
<form>
<input type="button" onclick="resizeWindow()" value="Redimensionar ventana">
</form>
</body>
</html>

Si se usan frames, debe utilizarse el elemento top en v ez del elemento window, para representar el frame superior.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 16/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Avanzar a una posición específica de la ventana

<html>
<head>
<script type="text/javascript">
function scrollWindow()
{
window.scrollTo(100,500)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="scrollWindow()" value="Scroll">
</form>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
</body>
</html>

Retrasar la ejecución del programa durante un tiempo

determinado
<html>
<head>
<script language="javascript">
function timeout()
{
setTimeout("alert('Esta ventana aparece un segundo después de que
hayas pulsado el botón')", 1000)
}
</script>
</head>

<body>
<form>
<input type="button" onclick="timeout()" value="Cuenta atrás">
</form>
</body>
</html>

Un par de detalles sobre este último ejemplo: La función setTimeout tiene dos parámetros: una cadena de texto que representa
un código Jav aScript a ejecutar cuando hay an pasado el número de milisegundos del segundo parámetro.

Cambiar una imagen por otra

<html>
<head>
<script type="text/javascript">
function setSrc()
{
var x=document.images
x[0].src="foto1.gif"
}
</script>
</head>
<body>
<img src="foto2.gif" width="107" height="98">
<form>
<input type="button" onclick="setSrc()" value="Cambiar imagen">
</form>
</body>
</html>

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 17/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Como podemos apreciar, lo primero que hacemos es recoger todas las imagenes de la página en una matriz mediante el objeto
docum ent.im ages y después acceder a la imagen específica como se muestra en la funcion setSrc(). Para hacer el cambio
usamos la propiedad src que tienen todos los objetos de imagen.

A medida que v ay amos pasando por los capítulos de este curso, iremos v iendo nuev os ejemplos con nuev as posibilidades de
manejo de las funciones y sus respectiv os objetos. En el siguiente capítulo v eremos cómo crear nuestros propios objetos y
aplicarlos en nuestros programas.

Clases y objetos
Dentro de los lenguajes actuales, que prov ienen en su may oría de los primeros lenguajes estructurados como ALGOL o BCPL, la
capacidad de crear funciones para reutilizarlas de div ersas formas, y a sea dentro del mismo módulo del programa o en
distintos módulos, ha sido uno de los fundamentos de la programación de sistemas informáticos. Sin embargo, este paradigma
se quedaba corto para nuev as situaciones que iban surgiendo con el tiempo, como la programación de v ideojuegos o el 3D y la
inteligencia artificial. A finales de los años 7 0 se comenzó a teorizar sobre lenguajes de programación que utilizasen entidades
independientes que fueran autocontenidas para realizar las aplicaciones. Como y a dijimos anteriormente, un programa se
compone de código y datos. los objetos son unidades que contienen su propio código y datos para su propio auto-
funcionamiento. Podemos decir que son programas dentro de programas.

Dicho así, podemos darnos cuenta de que los objetos pueden ser utilizados como v ariables, para nuestro propio uso. Pero no
podemos definir v ariables de objeto sin poder darles una forma. La forma de los objetos son los datos (propiedades) y código
(funciones) que contiene el objeto. A esto se le denomina clase de objeto. Para definir clases en Jav aScript, lo hacemos por
medio de funciones, como esta:

function Persona(nombre) {
this.nombre = nombre;
this.color_pelo = 'negro';
this.peso = 75;
this.altura = 165;
this.sexo = 'varón';
this.edad= 26;
}

Vamos a fijarnos bien como se estructura esta función. Se le llama constructor de la clase, y en ella definimos los datos de la
clase, los que v amos a poder utilizar al crear objetos con ella. Nótese el uso de la palabra reserv ada this. Esta palabra sirv e para
identificar al objeto en sí mismo dentro de la definición de la clase. Cuando escribimos

this.peso = 75;

estamos creando la propiedad "peso" de la clase "Persona". Cuando creamos una propiedad en el constructor y le damos un
v alor, como en este caso, estamos asignándole un v alor por defecto. Todos los objetos creados con este constructor
contendrán una propiedad "peso" con ese v alor inicial, aunque luego podremos cambiarlo al usar el objeto. Para definir un
objeto de esta clase, sólo tendríamos que hacer esto:

var hombre = new Persona('Pepe');

Aquí hemos definido el objeto "hombre", que contendrá todas las propiedades definidas en la función-clase "Persona". Si
queremos cambiar su v alor, sólo tenemos que hacer algo como esto:

hombre.peso = 80;

De esta forma, el dato definido para este objeto cambia. Pero si hemos definido más objetos de tipo Persona, cada uno de ellos
contendrá las mismas propiedades pero con v alores distintos. Ningún objeto tiene el mismo v alor que otro objeto de la misma
clase a no ser que nosotros se lo asignemos explícitamente.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 18/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

var mujer = new Persona('Ana');

mujer.peso = 67;
mujer.sexo = 'mujer';

En este caso hemos hecho lo mismo, pero le indicamos su propio peso, independiente del de la v ariable "hombre". Así,
podemos tener tantos objetos de la misma clase como queramos para realizar las operaciones que sean pertinentes. Una última
cosa sobre los constructores: como podemos v er, podemos pasarle parámetros, que podemos conv ertir en los v alores de las
propiedades de los objetos de esa clase.

Creación de funciones miembro

Hasta ahora hemos v isto como crear propiedades de las clases, pero necesitamos crear código en ese objeto que utilice las
propiedades que hemos creado en el constructor. Para crear una función miembro, debemos indicarlo en la propia función de
construcción:

function Persona(nombre) {
this.nombre = nombre;
this.color_pelo = 'negro';
this.peso = 75;
this.altura = 165;
this.sexo = 'varón';
this.dormir = dormir; // Nueva función miembro
}

Y ahora definimos la función dormir:

function dormir() {
alert(this.nombre + ' está durmiendo');
}

Fijémonos en la función. Tiene una forma bastante normal. Lo único especial que hemos hecho es añadir la línea

this.dormir = dormir;

al constructor, con lo que hemos asignado la función dormir como si fuera una propiedad. Recordemos que TODO es un objeto
en Jav aScript, y esto incluy e a las funciones. Ahora, para ejecutar este código, utilizamos el objeto anteriormente creado para
ponerlo en marcha:

hombre.dormir();

Veamos en un ejemplo todo el código que hemos generado hasta ahora:

<html>
<head>
<script language="javascript">
function Persona(nombre) {
this.nombre = nombre;
this.color_pelo = 'negro';
this.peso = 75;
this.altura = 165;
this.sexo = 'varón';
this.dormir = dormir;
}

function dormir() {
alert(this.nombre + ' está durmiendo');
}
</script>
</head>

<body>
<form>
</form>
<script>
var hombre = new Persona('Pepe');
hombre.dormir();
</script>
</body>
</html>

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 19/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Como resultado, nos mostrará el mensaje "Pepe está durmiendo". Como v emos, podemos usar las propiedades de los objetos
dentro de las funciones miembro, aunque también podríamos construir la misma función de otra manera:

function dormir() {
with (this)
alert(nombre + ' está durmiendo');
}

with es una palabra reserv ada de Jav aScript que permite coger una v ariable de objeto como this y permite utilizar sus
miembros como si fueran v ariables independientes. Pero tiene sus restricciones: estos nombres abrev iados sólo se pueden
utilizar dentro del ámbito de with (que si tiene v arias líneas, estas deben estar contenidas entre llav es, como for, if, etc...), y
además, se pueden confundir fácilmente con v ariables locales a la función o globales del programa, con lo cual particularmente
no recomendamos el uso de with, y a que puede dar lugar a fallos de ejecución difíciles de tratar si no se tienen en cuenta estas
restricciones. Se aconseja usar la forma this.nombre. También se recomienda crear cada clase en un archiv o diferente para que
no hay a confusiones de nombres, sobre todo de funciones miembro.

Otra manera de declarar la clase en Jav aScript:

<html>
<head>
<script language="javascript">
function Persona(nombre) {
this.nombre = nombre;
this.color_pelo = 'negro';
this.peso = 75;
this.altura = 165;
this.sexo = 'varón';
this.dormir = function dormir(){
alert(this.nombre + ' está durmiendo');
}

}
</script>
</head>
<body>
<form>
</form>
<script>
var hombre = new Persona('Pepe');
hombre.dormir();
</script>
</body>
</html>

Con este ejemplo se obtiene el mismo resultado que el anterior pero el código queda un poco mas complejo. A pesar de esto y a
podemos v er que a diferencia del código anterior este se encuentra encapsulado en la misma función [ function Persona(){} ]

Otro ejemplo de creación de una clase más complicado utilizando DOM estándar y Jav aScript; debemos recordar que
innerHTML es un método propietario de Microsoft y que desaparecerá de la especificación en un futuro muy próximo. Nótese
que la propiedad texto debe ser un nodo de texto (DOMTextNode) en lugar de HTML (Cualquier interface DOM: DOMNode,
DOMElement...) al v uelo como ocurriría usando innerHTML.

<html>
<head>
<script type="text/javascript" charset="utf-8">

// <![CDATA[
function CrearCapas(idcapa, info) {
this.id = idcapa;
this.texto = info;
this.CrearCapa = function CrearCapa() {
try {
// Esta es la manera correcta y estándar -aunque más lenta y costosa-
// de generar contenido mediante el DOM:
// Objetos DOMElement necesarios:
var body = document.getElementsByTagName('body').item(0); // Tag <body> también se puede en forma de
vector:
//...agName('body')[0]; pero no es compatible con Opera.
var capa = document.createElement('div'); // División al vuelo
var texto = document.createTextNode(this.texto); // Texto contenido en div al vuelo
// Establecer atributos de división:
capa.setAttribute('id', this.id);

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 20/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
capa.setAttribute('style', 'background-color:#f7f7f7; width:100px; border:#000000 2px solid;');
// Reconstruir el árbol DOM:
capa.appendChild(texto);
body.appendChild(capa);
} catch(e) {
alert(e.name + " - " + e.message);
}
}
}
// ]]>

</script>
</head>

<body>
<script type="text/javascript" charset="utf-8">

// <![CDATA[
var capa = new CrearCapas('idCapanueva', 'Hola Mundo');
capa.CrearCapa();
// ]]>

</script>
</body>
</html>

El resultado del código anterior es una página que por medio de Jav aScript crea una div isión (div ) y le asigna atributos como
ancho, alto, color, etc, y lo inserta dentro de la página al cargarse.

Creando clases usando el estándar ECMAScript 6

Con la llegada del stándar ECMAScript 6 en el 2015 se agregó azúcar sintáctica a la forma de crear las clases en Jav aScript,
ahora podemos crear nuestras clases de una forma más sencilla y estandarizada como lo hacen los lenguajes de POO.

Creando una clase

1 // Para crear una clase se usa la palabra reservada 'class'

2 class Persona {
3 /* El método 'constructor' se utiliza para inicializar los atributos
4 * de la clase.
5 *
6 * Observar que se pueden especificar valores por defecto a los perámetros.
7 * - Se pasa el valor por defecto 'conocido' a 'tipoSaludo'.
8 */
9 constructor(nombre, edad, email, tipoSaludo = 'conocido')
10 {
11 // Para hacer referencia a las propiedades del objeto se utiliza la
12 // palabra reservada 'this'.
13 this._nombre = nombre;
14 this._edad = edad;
15 this._email = email;
16 this._tipoSaludo = tipoSaludo;
17 }
18
19 // Se pueden crear los getter con la palabra reservada 'get'.
20 // Los getter sirven para obtener los valores de las propiedades
21 // del objeto.
22 get nombre()
23 {
24 return this._nombre;
25 }
26
27 // Se pueden crear los setter con la palabra reservada 'set'.
28 // Los setter sirven para asignar nuevos valores a las propiedades
29 // del objeto.
30 set tipoSaludo(tipoSaludo) {
31 this._tipoSaludo = tipoSaludo;
32 }
33
34 // Para crear un método simplemente se define su nombre
35 saludar(nombre)
36 {
37 if (this._tipoSaludo === 'conocido')
38 console.log(`Hola ${nombre}, ¿Cómo estas?`);
39 else
40 console.log(`Hola, mi nombre es ${this._nombre}`);
41 }

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 21/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
42
43 /* En algunas ocaciones se puede dar el caso de que no podemos tener
44 * acceso a nuestro objeto, la solución a este inconveniente se muestra
45 * y explica en este método.
46 */
47 mostrarme()
48 {
49 // Declarando una variable local y asignándole una referencia al propio
50 // objeto.
51 let _this = this;
52
53 // En una función anónima no se puede acceder al propio objeto usando
54 // la palabra reservada 'this' (obtenemos como salida 'undefined').
55 (function () {
56 console.log(this);
57 })();
58
59 // Una solución es declarar una variable y asignarle una referencia
60 // al objeto como se hace al inicio del método.
61 (function () {
62 console.log(_this);
63 })();
64
65 // Esta es la manera correcta y elegante de acceder a nuestro objeto.
66 ((e) => {
67 console.log(this);
68 })();
69 }
70
71 // Los métodos estáticos se declaran usando la palabra reservada 'static'.
72 static girar()
73 {
74 console.log('Girando!');
75 }
76 }
77
78 // Para crear una instancia de la clase 'Persona' se usa la palabra reservada
79 // 'new'. Recordar que el cuarto parámetro es opcional, por lo que al no pasarle
80 // valor tomara por defecto el especificado en el método 'constructor' de la
81 // clase.
82 var p = new Persona('Juan', 32, '[email protected]');
83
84 // Llamando a uno de sus métodos.
85 p.saludar('Ana');
86
87 // Cambiando el valor del atributo 'tipoSaludo' usando el setter tipoSaludo
88 p.tipoSaludo = 'otro';
89 p.saludar();
90
91 // Obtenieno el valor del atributo 'nombre' usando el getter nombre
92 console.log(p.nombre);
93
94 // Ejemplo del acceso al propio objeto y la mejor forma de hacerlo, en
95 // circunstancias como: los eventos, funciones anónimas, uso de JQuery dentro
96 // del método, etc.
97 p.mostrarme();
98
99 // Un método estático no necesita de una instacia de clase para ser invocado.
100 Persona.girar();

Clases predeterminadas en JavaScript

A continuación v amos a estudiar algunos de los objetos y clases más utilizados en Jav aScript.

Clase Array
La clase Array permite crear una matriz de datos. Vamos a estudiar algunos de sus métodos con el siguiente ejemplo:

<html>
<body>
<script type="text/javascript">
var famname = new Array(3);
famname[0] = "Jani";
famname[1] = "Tove";
famname[2] = "Hege";

document.write(famname.length + "<br/>");
document.write(famname.join(".") + "<br/>");
document.write(famname.reverse() + "<br/>");

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 22/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
document.write(famname.push("Ola","Jon") + "<br/>");
document.write(famname.pop() + "<br/>");
document.write(famname.shift() + "<br/>");
</script>
</body>
</html>

Estudiemos el código. Después de crear la matriz, utilizamos algunas funciones y propiedades.

length sirve para conocer la cantidad de elementos que contiene la matriz propiamente dicha.
join permite unir todos los elementos separados por una cádena de caracteres que pasamos como parámetro, en este caso, ".".
reverse posiciona los elementos actuales de forma inversa.
push nos permite añadir un nuevo elemento dentro de la matriz (en realidad, podemos añadir cualquier cantidad de ellos).
pop extrae el último elemento de la matriz y lo devuelve.
shift extrae y devuelve el primer elemento de la lista.
Si queremos ordenar los elementos de una matriz, podemos usar la función miembro sort para realizar esta operación. Pero la
ordenación realizada es "lexicográfica", es decir, que se ordenarán alfabéticamente. Si queremos realizar una ordenación
númerica, podemos crear una función de comparación como v eremos en el siguiente ejemplo:

<html>
<body>
<p>
Nota: Si no usamos función de comparación para definir el orden, la matriz
se ordenará siempre alfabéticamente. "500" vendrá antes que "7", pero en una
ordenación numérica, 7 viene antes que 500. Este ejemplo muestra como usar la
funcion de comparación - que ordenará correctamente los elementos tanto en una
matriz numérica como de cadenas.
</p>

<script type="text/javascript">
array1 = new Array("Rojo","Verde","Azul");
array2 = new Array("70","9","800");
array3 = new Array(50,10,2,300);
array4 = new Array("70","8","850",30,10,5,400);

function compareNum (a, b)

{
return a-b;
}

document.write("Ordenado: " + array1.sort());

document.write("<br><br>");

document.write("Ordenado sin compareNum: " + array2.sort());

document.write("<br>");
document.write("Ordenado con compareNum: " + array2.sort(compareNum));
document.write("<br><br>");

document.write("Ordenado sin compareNum: " + array3.sort());

document.write("<br>");
document.write("Ordenado con compareNum: " + array3.sort(compareNum));
document.write("<br><br>");

document.write("Ordenado sin compareNum: " + array4.sort());

document.write("<br>");
document.write("Ordenado con compareNum: " + array4.sort(compareNum));
</script>
</body>
</html>

Como podemos apreciar en el código, sólo las llamadas a sort que tienen como parámetro la función de comparación
compareNum han sido ordenadas numéricamente.

Clase Date
Esta clase permite definir una fecha y hora. Tiene una buena cantidad de funciones y aquí v amos a estudiar algunas de las más
interesantes.

<html>
<body>
<script type="text/javascript">
var d = new Date();
document.write(d.getDate());
document.write(".");
document.write(d.getMonth() + 1);
document.write(".");

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 23/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
document.write(d.getFullYear());
</script>
</body>
</html>

Este ejemplo construy e la fecha actual mediante los métodos getDate, getMonth y getFullYear. El v alor base de getMonth
es 0 (Enero). En los siguientes ejemplos v eremos como adaptar el objeto a la fecha que nosotros queremos.

En el siguiente ejemplo extraeremos la hora actual:

<html>
<body>
<script type="text/javascript">
var d = new Date();
document.write(d.getHours());
document.write(".");
document.write(d.getMinutes());
document.write(".");
document.write(d.getSeconds());
</script>
</body>
</html>

La dinámica de este ejemplo es muy parecida al anterior, pero en este caso usamos getHours, getMinutes y getSeconds.

<html>
<body>
<script type="text/javascript">
var d = new Date();
d.setFullYear("1990");
document.write(d);
</script>
</body>
</html>

Este ejemplo muestra cómo modificar el año, con setFullYear, aunque también podemos cambiar otras partes de la fecha y la
hora, con setMonth, setDate (para el día), setHours, setMinutes y setSeconds. En v ez de setFullY ear, que tiene como
parámetro un año con todas sus cifras, podemos usar también setYear, que sólo necesita las dos últimas cifras del año (de 00
a 99). Algo a tener en cuenta es que con esto no cambiamos ningún parámetro de la fecha y hora del sistema, si no del objeto
Date exclusiv amente.

En el siguiente ejemplo v eremos como mostrar los días de la semana:

<html>
<body>
<script language="javascript">
var d = new Date();
var weekday = new Array("Domingo", "Lunes", "Martes", "Miercoles",
"Jueves", "Viernes", "Sábado");
document.write("Hoy es " + weekday[d.getDay()]);
</script>
</body>
</html>

Como v emos, podemos crear una matriz con los días de la semana (comenzando por el domingo, dado que se toma la
referencia anglosajona), y referenciar a sus elementos con la función getDay. También podemos usar otras funciones como
getMonth, getY ear, getHours, getMinutes y getSeconds.

Clase Math
Esta clase contiene funciones y propiedades relacionadas con las matemáticas.

<html>
<body>
<script language="javascript">
document.write(Math.round(7.25) + "<br>");
document.write(Math.random() + "<br>");
no = Math.random()*10;
document.write(Math.round(no) + "<br>");
document.write(Math.max(2,4) + "<br>");
document.write(Math.min(2,4) + "<br>");
</script>
https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 24/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
</body>
</html>

La función round permite redondear una cifra de coma flotante a un entero. random genera un número aleatorio, o si
queremos que este número se encuentre entre 1 y 10, lo podemos hacer como en la siguiente linea, generando un número
aleatorio y multiplicándolo por el máximo que queremos. m ax y m in dev uelv en el número máximo y mínimo entre dos
dados, respectiv amente. A su v ez, esta clase contiene también funciones trigonométricas como cos, sin, tan, acos, asin,
atan. Podemos contar con otras funciones de coma flotante como ceil, log, y sqrt (raiz cuadrada). Como puede comprobarse
también, no hace falta crear un objeto para usar esta clase (se las denomina clases estáticas).

Clase String
Esta clase permite la manipulación de cadenas de texto. Toda cadena de texto que creamos es un objeto de esta clase, así que
podemos hacer manipulaciones de muy div erso tipo.

<html>
<body>
<script type="text/javascript">
var str = "¡JavaScript es malo!";

document.write("<p>" + str + "</p>");

document.write(str.length + "<br>");

document.write("<p>" + str.fontcolor() + "</p>");

document.write("<p>" + str.fontcolor('red') + "</p>");
document.write("<p>" + str.fontcolor('blue') + "</p>");
document.write("<p>" + str.fontcolor('green') + "</p>");

var pos = str.indexOf("Script");

if (pos >= 0)
{
document.write("Script encontrado en la posición: ");
document.write(pos + "<br>");
}
else
{
document.write("¡Script no encontrado!" + "<br>");
}

document.write(str.substr(2,6));
document.write("<br><br>");
document.write(str.substring(2,6) + "<br>");

document.write(str.toLowerCase());
document.write("<br>");
document.write(str.toUpperCase() + "<br>");
</script>
</body>
</html>

En este ejemplo podemos v er v arios ejemplos del funcionamiento de las funciones de cadena que podemos encontrar en la
clase String. La propiedad length, como en Array, nos dev uelv e, en este caso, el número de caracteres de la cadena de texto.
fontcolor es una función que permite generar cadenas de distintos colores (nombres o v alores hexadecimales). indexOf es
una función que dev uelv e la posición de una cadena dentro de otra (partiendo de cero). Si es igual a -1, es que no se ha
localizado. substr y substring funcionan extray endo subcadenas de otras, pero con funcionamientos diferentes. substr nos
dev uelv e una subcadena que comienza en el primer parámetro, dev olv iendo el número de caracteres especificado en el
segundo parámetro. substring dev uelv e una subcadena que se comprende entre el primer y segundo parámetro (esto es,
contando siempre con un índice base de 0). Por último, toLowerCase y toUpperCase dev uelv en la misma cadena pero
conv ertida a minúsculas y may úsculas, respectiv amente.

A continuación se muestra una lista muy útil con los métodos y propiedades propios de la clase String, pero ¡cuidado! estos
metodos dependen de que el nav egador los implemente, o sea que no tienen porque funcionar en todos los nav egadores y /o
v ersiones.

Propiedades
length
prototype
constructor

Métodos

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 25/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

anchor()
big()
blink()
bold()
charAt()
charCodeAt()
concat()
fixed()
fontcolor()
fontsize()
fromCharCode()
indexOf()
italics()
lastIndexOf()
link()
localeCompare()
match()
replace()
search()
slice()
small()
split()
strike()
sub()
substr()
substring()
sup()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
valueOf()

Gestión de formularios
Una de las utilidades más interesantes de Jav aScript es la posibilidad de comprobar y gestionar formularios de forma que
podamos incluso ev itar que se env íe un formulario si los datos no son correctos. Primero estudiaremos como controlar la
gestión y el env ío de datos, y después nos sumergiremos en la comprobación propiamente dicha de los datos.

Gestión del formulario de datos

Cuando tenemos un formulario de datos que queremos env iar a un serv idor para su correspondiente gestión por parte de una
aplicación CGI, resulta muy interesante en ocasiones tener la posibilidad de comprobar la integridad de los datos antes de ser
env iados al serv idor. Además, tener la posibilidad de ev itar el env ío del formulario nos permite un may or control sobre su
gestión. Veamos el siguiente ejemplo:

<form action="prog.php" method="post" name="formu" id="formu"

onsubmit="return comprobar()">
Tu nombre: <input type="text" name="nombre" value=""><br>
Tu edad: <input type="text" name="edad" value="" size="2" maxlength="2"><br>
<input type="submit" value=" Enviar ">
</form>

Podemos apreciar en el formulario que hemos añadido un atributo nuev o, el ev ento onsubm it, que permite llamar a una
función creada por nosotros para comprobar los datos que v amos a env iar. La expresión

return comprobar()

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 26/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

hará que el contenido de onsubmit sea true o false, dependiendo de lo que dev uelv a la funcion comprobar(). Si el v alor es true,
los datos se env iarán al serv idor, y si es false, se retendrá la ejecución del formulario. A continuación estudiaremos una
posible función que podemos usar en este caso:

<script language="javascript">
function comprobar()
{
var nombre = document.formu.nombre.value;
var edad = document.formu.edad.value;

if (nombre.length > 30)

{
alert("Tu nombre es demasiado grande. Redúcelo.");
return false;
}

if (edad >= 20 && edad <= 40)

{
alert("Si tienes entre 20 y 40 años, no puedes usar este programa.");
return false;
}

return true;
}
</script>

Este script lo podemos colocar tanto en <head> como en <body >. Como estudiaremos ahora, realiza una serie de
comprobaciones automáticas que impedirán o no la ejecución y env ío del formulario.

Lo primero que hacemos es definir dos v ariables que contendrán el v alor de los dos controles del formulario que queremos
controlar. Para comprender esto, estudiemos las expresiones:

var nombre = document.formu.nombre.value;

Definimos la v ariable nombre, que será igual a la expresión "v alor del control nombre del formulario formu del objeto de
Jav aScript document". Es decir, podemos acceder a cualquier parte del documento por medio de sus nombres (o
identificadores, según el nav egador), y concretamente a los componentes de un formulario de la forma en que aparece en el
ejemplo. Así, una v ez que hemos obtenido los v alores, podemos procesar esos v alores, como aparece en el ejemplo.

Un detalle a tener en cuenta es que en el caso de que efectiv amente la situación dé lugar a un error (en este ejercicio, hemos
realizado las condiciones para que sean ciertas si efectiv amente se produce un error en los datos), la función dev olv erá false,
lo que bloqueará el env ío del formulario al serv idor. Sólo si se superan las dos pruebas que ponemos a los datos, se dev olv erá
true y el formulario se env iará. El código completo para este programa sería:

<html>
<head>
<script language="javascript">
function comprobar()
{
var nombre = document.formu.nombre.value;
var edad = document.formu.edad.value;

if (nombre.length > 30)

{
alert("Tu nombre es demasiado grande. Redúcelo.");
return false;
}

if (edad >= 20 && edad <= 40)

{
alert("Si tienes entre 20 y 40 años, no puedes usar este programa.");
return false;
}

return true;
}
</script>
</head>
<body>
<form action="prog.php" method="post" name="formu" id="formu"
onsubmit="return comprobar()">
Tu nombre: <input type="text" name="nombre" value=""><br>
Tu edad: <input type="text" name="edad" value="" size="2" maxlength="2"><br>
<input type="submit" value=" Enviar ">
</form>

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 27/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
</body>
</html>

Vamos a estudiar una serie de casos particulares que se alejan de alguna forma de la forma de obtener v alores que hemos v isto
en el ejemplo anterior, o alternativ as sobre como comprobar los datos. En el siguiente ejemplo v emos como capturar el
contenido de una serie de "radios", y a que podemos usar una función específica para comprobar que efectiv amente hemos
pulsado uno de los "radios":

<html>
<head>
<script language="javascript">
function check(browser)
{
document.formu.respuesta.value = browser;
}
</script>
</head>

<body>
<form name="formu" id="formu">
Selecciona tu navegador favorito:<br><br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Internet Explorer"> Internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Netscape"> Netscape<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Opera"> Opera<br>
<br>
<input type="text" name="respuesta" size="20">
</form>
</body>
</html>

Fijémonos en las etiquetas <input>: el ev ento onclick contiene una llamada a la función check, cuy o parámetro es una cadena
de texto. En este caso la cadena de texto es conseguida por medio de la expresion this.v alue. ¿Por qué this.value? Y a
conocemos lo que significa this, es la llamada al propio objeto, en este caso el "radio", y con esta expresión leemos el v alor de la
etiqueta <input>. Con el objeto por defecto this, podemos acceder a cualquer propiedad y función de la etiqueta en la que nos
encontramos en sus códigos de ev entos.

En el próximo ejemplo v eremos como procesar los checkboxes de un formulario. Debemos tener en cuenta que cada grupo de
checkboxes pueden tener el mismo nombre, por lo que el acceso a un grupo de estas etiquetas debe ser realizado por medio de
una matriz, como v eremos ahora. Además, no accederemos a la propiedad v alue para determinar cual está pulsada, si no a la
propiedad checked, que es un v alor booleano que nos indicará si efectiv amente un checkbox concreto está pulsado o no.

<html>

<head>
<script type="text/javascript">
function check()
{
cafe=document.formu.cafe;
respuesta=document.formu.respuesta;
txt="";
for (i=0;i<cafe.length;++i)
{
if (cafe[i].checked)
{
txt=txt + cafe[i].value + " ";
}
}

respuesta.value="Tu quieres café con " + txt;

}
</script>
</head>

<body>
<form name="formu" id="formu">
¿Cómo quieres tu café?&lt;br&gt;&lt;br&gt;
<input type="checkbox" name="cafe" value="crema">Con crema&lt;br&gt;
<input type="checkbox" name="cafe" value="azúcar">Con azúcar&lt;br&gt;
&lt;br&gt;
<input type="button" name="test" onclick="check()" value="Enviar pedido">
&lt;br&gt;&lt;br&gt;
<input type="text" name="respuesta" size="50">
</form>
</body>

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 28/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

</html>

Como podemos v er, hay v arias cosas a tener consideración: los checkboxes, al tener el mismo nombre (podrían tenerlo
distinto, pero este ejemplo nos permite v er esta posibilidad), se agrupan en forma de matriz, y por lo tanto, debemos recorrer
la lista de controles para acceder a sus contenidos. En nuestro caso, accedemos a la propiedad checked, que nos permite saber
si el checkbox está pulsado (true) o no (false). En la v ariable "txt" acumulamos los v alores de los checkboxes (a los que
accedemos por medio del correspondiente índice, como y a sabemos), y después mostramos el resultado en la linea de texto
que hay más abajo. Al introducir el texto en la propiedad v alue, cambiamos también el contenido del campo de texto.

En el siguiente ejemplo v eremos como av eriguar el dato pulsado en una lista de datos:

<html>
<head>
<script type="text/javascript">
function cual()
{
txt=document.formu.lista.options[document.formu.lista.selectedIndex].text;
document.formu.favorito.value=txt;
}
</script>
</head>

<body>
<form id="formu" name="formu">
Elige tu navegador favorito:
<select name="lista" onchange="cual()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
&lt;br&gt;&lt;br&gt;
Tu navegador favorito es: <input type="text" name="favorito" size="20">
</form>
</body>

</html>

La expresión

document.formu.lista.options[document.formu.lista.selectedIndex]

nos permite acceder a una de las opciones (es una matriz) de la lista de datos. En este caso, como las opciones no tienen v alor,
podemos acceder a la cadena de caracteres de la opción por medio de la propiedad text. En concreto, podemos conocer qué
elemento se ha seleccionado por medio de la propiedad selectedIndex del control de lista. Sólo un detalle más a tener en
cuenta: por un defecto de los nav egadores, no es posible elegir sin más el elemento actualmente seleccionado en la lista, y a que
no producirá ningún ev ento. Hay que tener esto en consideración para ev itar posibles problemas a la hora de trabajar con las
listas. Un truco para subsanar este inconv eniente es poner un primer option en blanco (<option> </option>) que será el que
aparezca al cargarse el select.

Apéndice A. Como escribir código en JavaScript

En este apéndice aprenderemos a insertar código Jav aScript en nuestras páginas. Como sabemos, las páginas web se componen
de código HTML (Hy perText Markup Language), y para incluir el código Jav ascript utilizamos una marca HTML, <script>. Esta
marca puede encontrarse en cualquier parte de la página web, tanto en el <head> como en el <body >. Aunque <script> es la
forma más corta existen otras formas de definir código script. Por ejemplo <script language="Jav aScript">. W3C recomienda
utilizar el tag <script ty pe="text/jav ascript">.

<html>
<head>
<title>Esta es una pagina web</title>
<script type="text/javascript">
var mi_numero = 1;

function calcula(numero) {
return numero + mi_numero;

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 29/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
}
</script>
</head>
<body>
<script>
document.write(calcula(1));
</script>
</body>
</html>

Este ejemplo mostrará un numero '2' en el nav egador.

Además, podemos especificarle el lenguaje en el que queremos programar. Existen otros lenguajes para nav egador como
Visual Basic Script y PerlScript, pero nosotros usamos Jav ascript porque es univ ersal: todos los nav egadores lo soportan,
mientras que los otros dependen de la plataforma donde nos encontremos. Para indicar el lenguaje, podemos escribir lo
siguiente:

<script language="Javascript">

</script>

De esta forma indicamos el lenguaje a usar. Esto es necesario en el caso de que tengamos que usar lenguajes combinados en la
misma página, como en el caso de que queramos enlazar una película flash con nuestra pagina web.

Otra forma de escribir Jav ascript en una página web es utilizando los ev entos de las etiquetas HTML. Las etiquetas HTML
tienen v arios "ev entos" que responden a determinados sucesos, como por ejemplo el click del ratón, el env ío de un formulario,
o la carga de una página. Por ejemplo, si queremos que aparezca un mensaje al cargar la página que estamos v iendo, haríamos
algo como esto:

<html>
<head>
</head>

<body onload="alert('Hola, esto es una página web')">

texto
</body>
</html>

Esto hará que aparezca un mensaje nada más cargar la página web. También podemos aplicar estos ev entos como enlaces,
botones, imágenes, etc... Prácticamente cualquier etiqueta HTML soporta ev entos como onclick, que permite responder a una
pulsación del botón izquierdo del ratón.

<html>
<head>
</head>

<body>
<a href="http://www.google.com/" onclick="alert('Vas a ir a Google')">Google</a>
</body>
</html>

En este ejemplo v emos cómo al mismo tiempo que v amos a Google, el nav egador nos av isa de lo que v amos a hacer antes de
que ocurra. Este tipo de acciones se pueden usar para comprobar formularios antes de env iar los datos (e incluso, ev itar su
env ío si no son correctos), comprobar dónde pinchamos en una imagen, etc..., observ ando los cambios en los objetos
Jav ascript.

Y una última manera de ejecutar código Jav ascript es adjuntando un archiv o al código principal, de tal forma que podemos
agrupar las funciones, clases y demás en un archiv o, y reutilizar ese archiv o tantas v eces como queramos posteriormente. Un
ejemplo puede ser éste:

funciones.js:

function saludo(nombre) {
alert('Hola, ' + nombre);
}

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 30/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

saludo.html:

<html>
<head>
<title>Esta es una pagina web</title>
<script language="Javascript" src="funciones.js"></script>
</head>
<body>
<script>
saludo('Ana');
</script>
</body>
</html>

En este ejemplo v emos cómo podemos incluir un código Jav ascript desde otro archiv o y utilizar las funciones incluidas dentro
de nuestro código, en tantos archiv os como queramos. De esta forma podemos reutilizar el código todo lo necesario.

Los comentarios
Los comentarios son uno de los elementos más despreciados en todos los lenguajes de programación, pero son de suma
utilidad: permiten aclarar y sintetizar el código, además de serv ir de ev entuales "ocultadores" de código, y a que todo lo que se
encuentra en un comentario no es interpretado por el nav egador. Podemos escribir comentarios de dos formas diferentes:

// Este es un comentario de una línea

Ponemos dos barras normales para crear un comentario de una línea. Este comentario también lo podemos usar en el caso de
que queramos ocultar una línea concreta de la ejecución del programa. Si queremos realizar un comentario de múltiples líneas,
haremos:

/* Este
es un
comentario
de
múltiples
líneas */

De esta forma, podemos comentar v arias líneas de texto o código en un bloque. Esto es bastante interesante cuando tenemos
que ocultar una gran cantidad de código continuo, que de otra forma tendríamos que comentar línea a línea con las dos barras.
v ar input1 = document.getElementBy Id("form1_input1");

var input2 = document.getElementById("form1_input2");

var sInput = input1.value + "," + input2.value;
var divSalida = document.getElementById("div1");
divSalida.innerHTML = sInput;

Los comentarios en el código son muy útiles para ay udar a comprender el sentido del programa, tanto para el creador del
código como para otros que puedan leerlo.

Los nombres de las variables

Jav ascript es un lenguaje no tipado, es decir una v ariable puede serv ir para almacenar un número, una cadena de texto, un
elemento DOM de HTML (sería más exacto hablar de "una referencia a un elemento DOM de HTML"). Este característica puede
ser una v entaja cuando se tiene cierta soltura con el lenguaje, sin embargo puede ser una trampa mortal para aquellos que
empiezan, y a que es fácil que intenten obtener el v alor del texto almacenado en la v ariable "campo1" cuando en realidad
"campo1" no contiene un número sino que referencia a un elemento de formulario input con identificador "campo1", de forma
que para obtener el texto del campo en realidad deberían consultar el v alor de "campo1.v alue". Estos errores son frecuentes y
es fácil ev itarlos si a la hora de elegir el nombre de nuestras v ariables prefijamos las mismas indicando el tipo de elemento al
que referencian. P.ej, una v ariable que almacene texto puede ir prefijada con "s" (de string), una referencia a un objeto div
puede ir prefijado con el propio "div " y una referencia a un input de formulario puede prefijarse con input. Así por ejemplo
escribiríamos:

var input1 = document.getElementById("form1_input1");

var input2 = document.getElementById("form1_input2");
https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 31/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros
var sInput = input1.value + "," + input2.value;
var divSalida = document.getElementById("div1");
divSalida.innerHTML = sInput;

También es conv eniente adjuntar un prefijo a las v ariables globales que v an a ser compartidas por todas las funciones del
script de forma que no se confundan con v ariables locales de igual nombre y sea fácil entender que se trata de v ariables
globales compartidas sin necesidad de buscar su definición original cuando estamos inspeccionando el código de una función
donde se utiliza. Por ejemplo:

function muestraMensaje(sMensaje){
globDivSalida.innerHTML = this.sMensaje;
}

En el anterior ejemplo se entiende que globDiv Salida es una v ariable global (que probablemente habrá sido inicializada
inmediatamente al arrancar el script) gracias a su prefijo glob y que además referencia a un div , gracias a su prefijo Div .

Apéndice B. Operadores en JavaScript

Los operadores son uno de los elementos fundamentales en cualquier lenguaje de programación, y a que son los que nos
permiten trabajar con v ariables y datos. A continuación v amos a estudiar los distintos operadores div ididos en categorías:

Operadores aritm éticos:

Operador Significado Ejemplo

+ suma números y cadenas
- resta
* producto
/ división
% módulo (resto) 20 % 10 (= 0)
variable++; ++variable;
++ suma tipográfica
(variable = variable + 1)
variable--; --variable;
-- (dos guiones) resta tipográfica
(variable = variable - 1)
Operadores de asignación:

Operador Significado Ejemplo Es igual a

= Asignación de datos x = 1;
+= Asignación y suma x += 1; x = x + 1;
-= Asignación y resta x -= 1; x = x - 1;
*= Asignación y producto x *= 1; x = x * 1;
/= Asignación y división x /= 1; x = x / 1;
%= Asignación y módulo x %= 1; x = x % 1;
Operadores condicionales (com parativ os):

Operador Significado Ejemplo

== es igual a 5 == 8 es falso
!= no es igual a 5 != 1 es verdad
> es mayor que 5 > 1 es verdad
< es menor que 5 < 8 es verdad
>= es mayor o igual que 5 >= 8 es falso
<= es menor o igual que 5 <= 1 es falso

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 32/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Operadores lógicos:

Operador Significado Ejemplo

&& Y 1 == 1 && 2 < 1 es falso
|| O 1 == 2 || 15 > 2 es verdad
! NO !(1 > 2) es verdad

Sum a y Resta T ipográfica

La diferencia en el uso de la suma y resta tipográfica radica en el momento en que se realiza la operación. Cuando los símbolos
preceden a la v ariable (ej: ++a; --a;) la operación se realiza antes de ejecutar el resto de las operaciones en la linea. Cuando la
v ariable precede a los símbolos (ej: a++; a--;) la operación se realiza despues de ejecutar el resto de las operaciones en la linea.
En caso de que la linea de código no contenga ninguna operación extra el resultado será el mismo. Aquí algunos ejemplos para
mostrar las diferencias:

var a=3;
var b=7;
a++;
--b;
//a=4, b=6
var c = b - a++; //Resultados: c = 1 (resta), luego a = 5 (++)
//a=5, b=6, c=1
c = --b / a++; //Resultados: b = 5 (--), luego c = 1 (división), luego a = 6

Apéndice C. Ejemplos de código

En un programa Jav aScript podemos encontrar con dos elementos básicos: código y datos. La parte del código es la que nos
permite hacer cosas dentro de la página web, y la parte de datos es la que define el estado de la página web en un momento
determinado. Los datos de un programa se guardan dentro de v ariables.

¿Qué es una v ariable? Una v ariable es como una caja: dentro de una caja nosotros podemos guardar cosas. Sólo que en las
v ariables de Jav aScript la caja sólo puede guardar una sola cosa a la v ez. ¿Y por qué se las llama v ariables? Se las denomina así
porque su contenido puede cambiar en cualquier momento durante el desarrollo del programa. De esta forma, una v ariable en
Jav aScript puede contener distintas cosas según donde se encuentre en el programa: números, letras, etc...

Tipos de datos en JavaScript

Existen cuatro tipos básicos:

Números (enteros, decimales, etc.).

Cadenas de caracteres.
Valores lógicos (True y False).
Objetos (una ventana, un texto, un formulario, etc.).

Declaración de variables
A continuación aparece un ejemplo de declaración de una v ariable en Jav aScript:

var miVar = 1234;

Aquí hemos definido una v ariable numérica con un v alor entero. Pero también podríamos definir un número con decimales:

var miVar = 12.34;

Como podemos v er, la nuev a v ariable usa el operador ‘.’ (punto) para distinguir entre la parte entera y la parte decimal. Esto es
importante, porque no podemos usar la coma como hacemos en España.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 33/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Si queremos definir una cadena de caracteres, lo podemos hacer de la siguiente manera:

var miCadena = 'Hola, mundo';

// o bien:

var miCadena = "Hola, mundo";

Aquí v emos que podemos usar los dos tipos de comillas para crear cadenas de caracteres, y será muy útil cuando trabajemos
con ello (podemos incluso combinarlas dentro de la misma cadena).

También podemos crear v ariables con v alores lógicos. Eso significa que la v ariable podrá tener sólo dos v alores: v erdad o
mentira.

var miVar = true;

Los v alores admitidos para este tipo de v ariables son true y false. Este tipo de v ariables nos v endrán muy bien para crear
condiciones y como v alor para dev olv er en funciones, que v eremos más adelante.

Y por último tenemos un tipo de dato especial: los objetos. ¿Y qué son los objetos? Son "cosas" que podemos usar en nuestro
programa para representar "entidades". Esto lo entenderemos muy fácilmente con unos ejemplos.

Estamos rodeados de objetos: mesas, libros, monitores, ratones, cuadros, etc... Algunos son más simples y otros son más
complicados. Podemos manipular todos ellos según sus características y su forma de interactuar con el entorno donde están.
Por ejemplo, una mesa sabemos que tiene cuatro patas, una tabla lisa, y que es de un color o v arios colores. Es decir, que
podemos determinar una mesa por sus propiedades o atributos. Pero además, con la mesa podemos hacer cosas: podemos
poner cosas encima, podemos usarla para comer o leer y a v eces podemos colgar cosas de ellas, por ejemplo en un rev istero.
Todo eso son métodos o comportamientos que la mesa tiene para interactuar con el resto de su entorno.

Pues bien, podemos decir que los objetos en Jav aScript son muy parecidos: tienen propiedades (datos) y m étodos (código).
Podemos crear y usar objetos para manejar elementos del nav egador web: una v entana del nav egador es un objeto window,
una página HTML es un objeto document, y una imagen es un objeto de tipo Image. Es fácil darse cuenta de que los objetos son
de un determinado tipo: un objeto mesa, un objeto v entana, un objeto ratón, etc... Todos los objetos de un mismo tipo tienen
características semejantes, aunque luego cada objeto tiene propiedades con v alores distintos dependiendo de cada caso. Así,
dos mesas puede tener color marrón o azul, pero las dos seguirán teniendo patas, que pueden ser 4 ó 5, depende... En
Jav aScript, los objetos son muy importantes, como v amos a comprobar en el siguiente capítulo, que trata de los array s
(matrices) y las sentencias de control.

Operar con variables

Como y a estudiamos en el capítulo anterior, en Jav aScript podemos definir unos elementos llamados v ariables que nos
permiten almacenar datos de distintos tipos. Naturalmente, nosotros podemos usar esos datos en nuestros programas y , como
y a se indicó entonces, podemos incluso v ariar esos datos manteniendo la v ariable donde los depositamos. A esta operación se
le llama modificar la v ariable, y es una de las bases de la programación moderna.

Las v ariables podemos usarlas en multitud de situaciones, al mostrar datos, al env iarlos y recibirlos, en expresiones y
llamadas a funciones... Podemos tratar con v ariables para almacenar los datos que v amos a usar a lo largo del programa, tanto
globalmente en toda la aplicacion como de forma exclusiv a con las funciones que creemos, como v eremos en el capítulo
correspondiente.

var numero = 1;
numero = numero + 2;
numero += 3;

El resultado final de esta operación sera que la v ariable numero será igual a 6. En la primera línea lo que hemos hecho es
declarar la v ariable numero con el v alor inicial 1. Despues, hemos incrementado el v alor de la v ariable con la misma v ariable,
sumándole 2, y posteriormente hemos v uelto a incrementar la v ariable sumándole 3 por medio del operador tipográfico +=.
Los operadores se encuentran en el primer apéndice del curso.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 34/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

Sin embargo, surge un pequeño problema cuando tenemos que tratar con cantidades may ores de datos. Las v ariables como
tales sólo nos permiten gestionar un dato cada una de ellas, con lo que cuando tenemos que gestionar grupos may ores de
datos, se hace realmente complicado. Miremos el siguiente ejemplo, en el que definimos unos nombres:

var nombre1 = 'pepe';

var nombre2 = 'toño';
var nombre3 = 'mari';
var nombre4 = 'lucas';
var nombre5 = 'sonia';
var nombre6 = 'ruth';
var nombre7 = 'tete';

Si ahora quisiéramos listar estos datos (más adelante v eremos cómo), tendríamos que referirnos a cada v ariable en concreto,
con lo que tenemos pululando por nuestro programa siete v ariables a las que será difícil referirnos de una forma genérica (por
ejemplo, como estudiaremos más adelante, para listarlos dinámicamente en un formulario). Para resolv er este problema
tenemos una solución: los array s (matrices).

Arrays (Matrices)
Las matrices son v ariables que contienen un objeto de tipo Array. Podemos definir una matriz de la siguiente manera:

var matriz = new Array();

De esta forma, hemos creado una matriz v acía que puede contener un numero ilimitado de elementos, tantos como nos
permita el sistema donde se ejecuta. Las matrices v ienen a ser como cajas que en v ez de contener una sola cosa, contienen
muchas, como si pudiéramos div idir la caja en compartimentos en los cuales pudiéramos ir depositando cosas.

Además, podemos crear matrices con una "dimensión", es decir, que podemos hacer que la matriz se inicie con un número de
elementos determinado:

var matriz = new Array(15);

Con esta instrucción, lo que hemos hecho es crear una matriz de quince elementos. Pero ahora lo interesante es saber cómo
llamar a esos elementos, y a que si creamos la matriz, pero no sabemos operar con ella, no sirv e para mucho, ¿no? La forma de
acceder a un elemento de la matriz es la siguiente:

elemento = matriz[1];

En este ejemplo, la v ariable elemento contendrá el v alor del elemento 1 de la matriz. Es lo que se llama índice de la matriz, e
identifica a cualquiera de los elementos de la matriz. Hay que fijarse en que utilizamos los corchetes "[]" para señalar un
elemento de la matriz. El primer elemento de la matriz es el de índice ‘0’, no el de índice ‘1’. Así, para el anterior ejemplo de una
matriz de 15 elementos, el último elemento posible es el 14.

De la misma forma, podemos dar un v alor a cualquiera de los elementos de la matriz:

matriz[5] = ‘hola’;

Hemos asignado el v alor hola al elemento 5 de la matriz. Los elementos de una matriz pueden contener cualquier tipo de dato,
y se pueden cambiar en cualquier parte del programa, al igual que ocurre con las v ariables.

¿Y si queremos saber cuántos datos tenemos en la matriz? Como dijimos antes, las matrices son objetos de tipo Array , y los
objetos pueden tener atributos (datos) y funciones (código). El atributo que debemos usar con matrices es length:

longitud = matriz.length;

De esta forma, podemos saber cuantos elementos tiene la matriz. Recordad que como el primer índice es ‘0’, el último
elemento será siempre matriz.length - 1.

Si necesitamos que la matriz contenga más elementos, podemos redimensionar la matriz aplicándole un nuev o objeto de
matriz:

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 35/36
29/12/2018 Programación en JavaScript/Texto completo - Wikilibros

matriz = new Array(longitud que queramos);

Sin embargo, perderemos todos los elementos que tuv iéramos anteriormente.

Obtenido de «https://es.wikibooks.org/w/index.php?title=Programación_en_JavaScript/Texto_completo&oldid=191996»

Esta página se editó por última vez el 26 sep 2012 a las 15:07.

El texto está disponible bajo la Licencia Creative Commons Atribución-CompartirIgual 3.0; pueden aplicarse términos adicionales.
Véase Términos de uso para más detalles.

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Texto_completo 36/36