Manual de JavaScript

Manual de JavaScript

Introducción: Manual de JavaScript

Manual de Javascript desde cero. Adéntrate en el lenguaje de programación más popular de la web y conoce
todas las características de la programación del lado del cliente.
 Javascript es el lenguaje de programación usado para las páginas
páginas web, compatible con todos los navegadores
y que forma un estándar de desarrollo que ahora también se extiende a dispositivos o programas de
propósito general multiplataforma.
Este manual de Javascript está dividido en dos grandes partes. En la primera parte veremos las
características fundamentales del lenguaje, como su sintaxis, variables, estructuras de control, funciones,
arrays, etc. Toda la información que encontrarás en la primera parte te sirve para programar Javascript a
nivel general, sea donde sea el entorno de ejecución de tus programas.
En la segunda parte, que también encontrarás en esta misma página, ahondaremos en el uso de Javascript en
el ámbito del navegador, es decir, aprenderemos a manejar los recursos que nos ofrece el navegador para
hacer páginas interactivas, capaces de interactuar con el usuario de manera avanzada.
Encuentras este manual online en:
http://desarrolloweb.com/manuales/manual-javascript.html
 Manual de JavaScript

Autores del manual

Las siguientes personas han participado como autores escribiendo artículos de este manual.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online
EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.

Manu Gutierrez
 Manual de JavaScript

Introducciones a Javascript

 Artículos que nos servirán para introducirnos en este lenguaje, aprendiendo los conceptos más básicos de
 Javascript y la programación del lado del cliente.

Introducción a Javascript
 Veamos qué es JavaScript y las posibilidades que nos ofrece utilizar este lenguaje a la hora de
desarrollar páginas web. Conocemos algo de su historia.
Con este artículo comenzamos el Manual de Javascript, en el que esperamos ofrecer un punto de partida
para las personas que quieren introducirse en el mundo de la programación web del lado del cliente.
El curso de Javascript que hemos preparado en DesarrolloWeb.com está dividido en dos partes
fundamentales. En este primer manual pretendemos explicar el lenguaje Javascript de manera general,
ofreciendo información sobre cómo incluir scripts y lidiar con los elementos más básicos de cualquier
lenguaje de programación, como son las variables, operadores, estructuras de control, funciones, etc. La
segunda parte del manual la dedicaremos a explorar temas más específicos sobre cómo Javascript nos puede
ayudar a aplicar dinamismo a una página web, a través del control dinámico de elementos de la página y la
interacción con el usuario.

Nota: Por tanto, en este primer manual encontraréis que se ofrece mucha más información teórica
típica sobre lenguajes de programación. Será esencial para saber cómo dar los primeros pasos en la
programación, pero quizás resulte un poco más aburrida que la segunda parte, donde aprenderemos a
alterar dinámicamente la página web, responder a acciones del usuario, etc.
Nosotros hemos querido explicar las cosas con detenimiento, para que aprender Javascript con este
manual esté al alcance de personas incluso sin conocimientos de programación. No obstante, en
DesarrolloWeb.com existen diversos manuales más básicos todavía para aprender a programar, como
puede ser el curso de programación en vídeo, o más específicos para la web con el manual de Páginas
dinámicas o la introducción a la programación.
Sin embargo, quizás personas más experimentadas puedan preferir pasar directamente a la segunda parte
de este manual, donde explicaremos cosas más prácticas y volver sobre artículos puntuales de este
manual para utilizarlos como referencia a medida que vayan necesitando conocer la sintaxis de
determinadas estructuras de control, operadores del lenguaje, construcción de funciones, etc.

En este artículo pretendemos explicar qué es Javascript y para qué sirve este lenguaje, al menos en líneas
generales. A lo largo de éste y los próximos artículos explicaremos los conceptos necesarios para que las
personas tengan una idea más o menos clara sobre Javascript, las posibilidades de del lenguaje o usos más
comunes y los modos de trabajo que podemos emplear para desarrollar nuestros propios scripts.
 Manual de JavaScript

Nota: Otro recurso que queremos recomendar para aprender Javascript, especialmente indicado para las
personas con menos experiencia, es el Videotutorial de Javascript. Por supuesto, tampoco nos queremos
olvidar de los Talleres de Javascript, así como otros manuales más específicos que encontrarás en la
sección Javascript a fondo.

Qué es Javascript
 Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar
acciones dentro del ámbito de una página web. Con Javascript podemos crear efectos especiales en las
páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las
instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor
recurso, y tal vez el único, con que cuenta este lenguaje es el propio navegador.
 Javascript es el siguiente paso, después del HTML, que puede dar un programador de la web que decida
mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de programación bastante sencillo y 
pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una
experiencia previa en la programación podrán aprender este lenguaje con facilidad y utilizarlo en toda su
potencia con sólo un poco de práctica.
Entre las acciones típicas que se pueden realizar en Javascript tenemos dos vertientes. Por un lado los
efectos especiales sobre páginas web, para crear contenidos dinámicos y elementos de la página que tengan
movimiento, cambien de color o cualquier otro dinamismo. Por el otro, javascript nos permite ejecutar
instrucciones como respuesta a las acciones del usuario, con lo que podemos crear páginas interactivas con
programas como calculadoras, agendas, o tablas de cálculo.
 Javascript es un lenguaje con muchas posibilidades, permite la programación de pequeños scripts, pero
también de programas más grandes, orientados a objetos, con funciones, estructuras de datos complejas,
etc. Toda esta potencia de Javascript se pone a disposición del programador, que se convierte en el
 verdadero dueño y controlador de cada cosa que ocurre en la página.
En este manual vamos a tratar de acercarnos a este lenguaje en profundidad y conocer todos sus secretos y 
métodos de trabajo. Al final del manual seremos capaces de controlar el flujo en nuestros programas
 Javascript y saber cómo colocar scripts para resolver distintas necesidades que podamos tener. Todo lo que
 veremos a continuación nos servirá de base para adentrarnos más adelante en el desarrollo de páginas
enriquecidas del lado del cliente.

Algo de la historia de Javascript

En Internet se han creado multitud de servicios para realizar muchos tipos de comunicaciones, como
correo, charlas, búsquedas de información, etc. Pero ninguno de estos servicios se ha desarrollado tanto
como el Web. Si estamos leyendo estas líneas no vamos a necesitar ninguna explicación de lo que es el web,
pero si podemos hablar un poco sobre cómo se ha ido desarrollando con el paso de los años.
El Web es un sistema Hipertexto, una cantidad de dimensiones gigantes de textos interrelacionados por
medio de enlaces. Cada una de las unidades básicas donde podemos encontrar información son las páginas
 Manual de JavaScript

permitiese presentar cada una de estas informaciones junto con unos pequeños estilos, este lenguaje fue el
HTML.
Conforme fue creciendo el Web y sus distintos usos se fueron complicando las páginas y las acciones que se
querían realizar a través de ellas. Al poco tiempo quedó patente que HTML no era suficiente para realizar
todas las acciones que se pueden llegar a necesitar en una página web. En otras palabras, HTML se había
quedado corto ya que sólo sirve para presentar el texto en un página, definir su estilo y poco más.
 Al complicarse los sitios web, una de las primeras necesidades fue que las páginas respondiesen a algunas
acciones del usuario, para desarrollar pequeñas funcionalidades más allá de los propios enlaces. El primer
ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propósito
general, pero que había creado una manera de incrustar programas en páginas web. A través de la tecnología
de los Applets, se podía crear pequeños programas que se ejecutaban en el navegador dentro de las propias
páginas web, pero que tenían posibilidades similares a los programas de propósito general. La programación
de Applets fue un gran avance y Netscape, por aquel entonces el navegador más popular, había roto la
primera barrera del HTML al hacer posible la programación dentro de las páginas web. No cabe duda que la
aparición de los Applets supuso un gran avance en la historia del web, pero no ha sido una tecnología
definitiva y muchas otras han seguido implementando el camino que comenzó con ellos.

Llega Javascript

Netscape, después de hacer sus navegadores compatibles con los applets, comenzó a desarrollar un lenguaje
de programación al que llamó LiveScript que permitiese crear pequeños programas en las páginas y que
fuese mucho más sencillo de utilizar que Java. De modo que el primer Javascript se llamo LiveScript, pero
no duró mucho ese nombre, pues antes de lanzar la primera versión del producto se forjó una alianza con
Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje.
La alianza hizo que Javascript se diseñara como un hermano pequeño de Java, solamente útil dentro de las
páginas web y mucho más fácil de utilizar, de modo que cualquier persona, sin conocimientos de
programación pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Además, para programar Javascript
no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al código
HTML, como ocurría con los applets.
Netscape 2.0 fue el primer navegador que entendía Javascript y su estela fue seguida por otros clientes web
como Internet Explorer a partir de la versión 3.0. Sin embargo, la compañía Microsoft nombró a este
lenguaje como JScript y tenía ligeras diferencias con respecto a Javascript, algunas de las cuales perduran
hasta el día de hoy.

Diferencias entre distintos navegadores

Como hemos dicho el Javascript de Netscape y el de Microsoft Internet Explorer tenía ligeras diferencias,
pero es que también el propio lenguaje fue evolucionando a medida que los navegadores presentaban sus
distintas versiones y a medida que las páginas web se hacían más dinámicas y más exigentes las necesidades
de funcionalidades.
Las diferencias de funcionamiento de Javascript han marcado las historia del lenguaje y el modo en el que
los desarrolladores se relacionan con él, debido a que estaban obligados a crear código que funcionase
 Manual de JavaScript

Qué necesitas para trabajar con Javascript

Para programar en Javascript necesitamos básicamente lo mismo que para desarrollar páginas web con
HTML. Un editor de textos y un navegador compatible con Javascript. Cualquier ordenador mínimamente
actual posee de salida todo lo necesario para poder programar en Javascrip. Por ejemplo, un usuario de
 Windows dispone dentro de su instalación típica de sistema operativo, de un editor de textos, el Bloc de
notas, y de un navegador: Internet Explorer.

Nota: Usuarios que deseen herramientas más avanzadas pueden encontrar en Internet fácilmente
programas similares en la sección de programas para desarrolladores.

Permitidme una recomendación con respecto al editor de textos. Se trata de que, aunque el Bloc de Notas es
suficiente para empezar, tal vez sea muy útil contar con otros programas que nos ofrecen mejores
prestaciones a la hora de escribir las líneas de código. Estos editores avanzados tienen algunas ventajas
como que colorean los códigos de nuestros scripts, nos permiten trabajar con varios documentos
simultáneamente, tienen ayudas, etc. Entre otros queremos destacar Komodo Edit, Notepad++ o
UltraEdit.

Conocimientos previos recomendables

Lo cierto es que no hace falta tener mucha base de conocimientos para ponerse a programar en Javascript.
Lo más seguro es que si lees estas líneas ya sepas todo lo necesario para trabajar, puesto que ya habrás
tenido alguna relación con el desarrollo de sitios web y habrás detectado que para hacer ciertas cosas te
 viene bien conocer un poco de Javascript.
No obstante, sería bueno tener un dominio avanzado de HTML, al menos el suficiente para escribir código
en ese lenguaje sin tener que pensar qué es lo que estás haciendo. También será útil un conocimiento medio
sobre CSS y quizás alguna experiencia previa sobre algún lenguaje de programación, aunque en este manual
de DesarrolloWeb.com vamos a tratar de explicar Javascript incluso para personas que no hayan
programado nunca.
En el siguiente artículo seguiremos con temas que sirven de introducción al lenguaje de scripting del lado
del cliente viendo las algunas diferencias de Javascript que existen en las versiones de navegadores que han
ido apareciendo.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 16/07/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Versiones de navegadores y de Javascript

Presentamos las diferentes versiones de JavaScript, los navegadores que las aceptan y sus
 Manual de JavaScript

Para continuar con la introducción al lenguaje que estamos viendo en el Manual de Javascript, también
resulta apropiado introducir las distintas versiones de Javascript que existen y que han evolucionado en
conjunto con las versiones de navegadores. El lenguaje ha ido avanzando durante sus años de vida e
incrementando sus capacidades. En un principio podía realizar muchas cosas en la página web, pero tenía
pocas instrucciones para crear efectos especiales.
Con el tiempo también el HTML ha avanzado y se han creado nuevas características como las capas, que
permiten tratar y maquetar los documentos de manera distinta. Javascript ha avanzado también y para
manejar todas estas nuevas características se han creado nuevas instrucciones y recursos. Para resumir
 vamos a comentar las distintas versiones de Javascript:

 Actualizado: En el momento de actualizar este artículo, podemos decir que no tenemos que
preocuparnos mucho de las versiones de Javascript que puedan haber existido. Realmente cualquier
navegador medianamente moderno tendrá ahora todas las funcionalidades de Javascript que vayamos a
necesitar y sobre todo, las que podamos utilizar en nuestros primeros pasos con el lenguaje. No obstante
puede venir bien conocer las primeras versiones de Javascript que comentamos en este artículo, a modo
de curiosidad.

 Javascript 1: nació con el Netscape 2.0 y soportaba gran cantidad de instrucciones y funciones, casi
todas las que existen ahora ya se introdujeron en el primer estandar.
 Javascript 1.1: Es la versión de Javascript que se diseñó con la llegada de los navegadores 3.0.
Implementaba poco más que su anterior versión, como por ejemplo el tratamiento de imágenes
dinámicamente y la creación de arrays.
 Javascript 1.2: La versión de los navegadores 4.0. Esta tiene como desventaja que es un poco
distinta en plataformas Microsoft y Netscape, ya que ambos navegadores crecieron de distinto
modo y estaban en plena lucha por el mercado.
 Javascript 1.3: Versión que implementan los navegadores 5.0. En esta versión se han limado
algunas diferencias y asperezas entre los dos navegadores.
 Javascript 1.5: Versión actual, en el momento de escribir estas líneas, que implementa Netscape 6.
Por su parte, Microsoft también ha evolucionado hasta presentar su versión 5.5 de JScript (así
llaman al javascript utilizado por los navegadores de Microsoft).
Es obvio que todavía, después de escribir estas líneas, se presentarán o habrán presentado muchas otras
 versiones de Javascript, pues, a medida que se van mejorando los navegadores y van saliendo versiones de
HTML, surgen nuevas necesidades para programación de elementos dinámicos. No obstante, todo lo que
 vamos a aprender en este manual, incluso otros usos mucho más avanzados, ya está implementado en
cualquier Javascript que existan en la actualidad.
En el siguiente artículo comenzaremos ya a mostrar pequeños códigos Javascript que servirán para hacer
efectos simples en páginas web.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 16/07/2001
Disponible online en http://desarrolloweb.com/articulos/20.php
 Manual de JavaScript

Efectos rápidos con Javascript

En este último artículo de introducción a Javascript veremos algunos ejemplos de códigos sencillos
de gran utilidad.
 Antes de meternos de lleno en materia podemos ver una serie de efectos rápidos que se pueden programar
con Javascript, lo que nos puede hacer una idea más clara de las capacidades y potencia del lenguaje. A
continuación veremos varios ejemplos, que hemos destacado para esta introducción en el Manual de
 Javascript, por tener un mínimo de complejidad y aunque sean muy básicos, nos vendrán bien para tener
una idea más exacta de lo que es Javascript a la hora de recorrer los siguientes capítulos.

Abrir una ventana secundaria

Primero vamos a ver que con una línea de Javascript podemos hacer cosas bastante atractivas. Por ejemplo
podemos ver cómo abrir una ventana secundaria sin barras de menús que muestre el buscador Google. El
código sería el siguiente.

<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>

Podemos ver el ejemplo en marcha aquí.

Un mensaje de bienvenida
Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que
podría dar la bienvenida a los visitantes.

<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>

Puedes ver el ejemplo en una página a parte.

Fecha actual
 Veamos ahora un sencillo script para mostrar la fecha de hoy. A veces es muy interesante mostrarla en las
 webs para dar un efecto de que la página está al "al día", es decir, está actualizada.

<script> document.write(new Date()) </script>

Estas líneas deberían introducirse dentro del cuerpo de la página en el lugar donde queramos que aparezca
la fecha de última actualización. Podemos ver el ejemplo en marcha aquí.
 Manual de JavaScript

extensión .js y se incluyen de esta manera.

<SCRIPT type="text/javascript" src="archivo_externo.js">

//estoy incluyendo el fichero "archivo_externo.js"
</SCRIPT>

Dentro de las etiquetas <SCRIPT>  se puede escribir cualquier texto y será ignorado por el navegador, sin
embargo, los navegadores que no entienden el atributo SRC tendrán a este texto por instrucciones, por lo
que es aconsejable poner un comentario Javascript antes de cada línea con el objetivo de que no respondan
con un error.
El archivo que incluimos (en este caso archivo_externo.js) debe contener tan solo sentencias Javascript. No
debemos incluir código HTML de ningún tipo, ni tan siquiera las etiquetas </SCRIPT>  y </SCRIPT>.
 Vistos estos otros usos interesantes que existen en Javascript y que debemos conocer para poder aprovechar
las posibilidades de la tecnología, debemos haber aprendido todo lo esencial para empezar a hacer cosas
más importantes. Así que en el próximo artículo empezaremos a repasar la sintaxis del lenguaje Javascript.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 29/07/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Sintaxis Javascript
Empezamos a contar la sintaxis del lenguaje Javascript, indicando sus principales características.
Por fin empezamos a ver código fuente de Javascript! Esperamos que se hayan asimilado todas las
informaciones previas del Manual de Javascript, en las que hemos aprendido básicamente diversos modos
de incluir scripts en páginas web. Hasta ahora todo lo que hemos visto en este manual puede haber parecido
muy teórico, pero de aquí en adelante esperamos que os parezca más ameno por empezar a ver cosas más
prácticas y relacionadas directamente con la programación.
El lenguaje Javascript tiene una sintaxis muy parecida a la de Java por estar basado en él. También es
muy parecida a la del lenguaje C, de modo que si el lector conoce alguno de estos dos lenguajes se podrá
manejar con facilidad con el código. De todos modos, en los siguientes capítulos vamos a describir toda la
sintaxis con detenimiento, por lo que los novatos no tendrán ningún problema con ella.

Comentarios en el código
Un comentario es una parte de código que no es interpretada por el navegador y cuya utilidad radica en
facilitar la lectura al programador. El programador, a medida que desarrolla el script, va dejando frases o
palabras sueltas, llamadas comentarios, que le ayudan a él o a cualquier otro a leer mas fácilmente el script a
la hora de modificarlo o depurarlo.
 Ya se vio anteriormente algún comentario Javascript, pero ahora vamos a contarlos de nuevo. Existen dos
 Manual de JavaScript

tipos de comentarios en el lenguaje. Uno de ellos, la doble barra, sirve para comentar una línea de código. El
otro comentario lo podemos utilizar para comentar varias líneas y se indica con los signos /  para empezar el 
comentario y / para terminarlo. Veamos unos ejemplos.

<SCRIPT>
//Este es un comentario de una línea
/*Este comentario se puede extender
por varias líneas.
Las que quieras*/
</SCRIPT>

Mayúsculas y minúsculas
En Javascript se han de respetar las mayúsculas y las minúsculas. Si nos equivocamos al utilizarlas el
navegador responderá con un mensaje de error, ya sea de sintaxis o de referencia indefinida.
Por poner un ejemplo, no es lo mismo la función alert() que la función Alert(). La primera muestra un texto
en una caja de diálogo y la segunda (con la primera A mayúscula) simplemente no existe, a no ser que la
definamos nosotros. Como se puede comprobar, para que la función la reconozca Javascript, se tiene que
escribir toda en minúscula. Otro claro ejemplo lo veremos cuando tratemos con variables, puesto que los
nombres que damos a las variables también son sensibles a las mayúsculas y minúsculas.
Por regla general, los nombres de las cosas en Javascript se escriben siempre en minúsculas, salvo que se
utilice un nombre con más de una palabra, pues en ese caso se escribirán con mayúsculas las iniciales de las
palabras siguientes a la primera. Por ejemplo document.bgColor (que es un lugar donde se guarda el color
de fondo de la página web), se escribe con la "C" de color en mayúscula, por ser la primera letra de la
segunda palabra. También se puede utilizar mayúsculas en las iniciales de las primeras palabras en algunos
casos, como los nombres de las clases, aunque ya veremos más adelante cuáles son estos casos y qué son las
clases.

Separación de instrucciones
Las distintas instrucciones que contienen nuestros scripts se han de separar convenientemente para que el
navegador no indique los correspondientes errores de sintaxis. Javascript tiene dos maneras de separar
instrucciones. La primera es a través del carácter punto y coma (;) y la segunda es a través de un salto de
línea.
Por esta razón Las sentencias Javascript no necesitan acabar en punto y coma a no ser que coloquemos dos
instrucciones en la misma línea.
No es una mala idea, de todos modos, acostumbrarse a utilizar el punto y coma después de cada instrucción
pues otros lenguajes como Java o C obligan a utilizarlas y nos estaremos acostumbrando a realizar una
sintaxis más parecida a la habitual en entornos de programación avanzados.
En el próximo artículo comenzaremos a hablaros sobre la creación de variables en Javascript.
 Manual de JavaScript

Fue publicado por primera vez en 30/07/2001

Disponible online en http://desarrolloweb.com/articulos/20.php
 Manual de JavaScript

incrementos
/ % Multiplicación división y módulo +- Suma y resta << >> >>> Cambios a nivel de bit < <= >
>= Operadores condicionales == != Operadores condicionales de igualdad y desigualdad & ^ |
Lógicos a nivel de bit && || Lógicos boleanos = += -= *= /= %= <<= >>= >>>= &= ^= !=
 Asignación
En los siguientes ejemplos podemos ver cómo las expresiones podrían llegar a ser confusas, pero con la
tabla de precedencia de operadores podremos entender sin errores cuál es el orden por el que se ejecutan.

12 * 3 + 4 - 8 / 2 % 3

En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, con lo que se realizarían
estas operaciones. Primero la multiplicación y luego la división por estar más a la izquierda del módulo.

36 + 4 - 4 % 3

 Ahora el módulo.

36 + 4 - 1

Por último las sumas y las restas de izquierda a derecha.

40 - 1

Lo que nos da como resultado el valor siguiente.

39

De todos modos, es importante darse cuenta que el uso de los paréntesis puede ahorrarnos muchos
quebraderos de cabeza y sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los
operadores. Cuando veamos poco claro el orden con el que se ejecutarán las sentencias podemos utilizarlos
y así forzar que se evalúe antes el trozo de expresión que se encuentra dentro de los paréntesis.
Para acabar con el tema de operadores nos queda por ver un último operador un tanto especial, llamado
typeof .

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 20/09/2001
Disponible online en http://desarrolloweb.com/articulos/20.php
 Manual de JavaScript

Operadores Javascript II
Estudiamos los operadores de cadenas, lógicos y condicionales.
Este es el segundo artículo sobre los operadores que publicamos en el Manual de Javascript,
Javascript, pues son
suficientes como para verlos por partes. En la anterior entrega ofrecimos una breve descripción del
concepto de operador y vimos los operadores aritméticos y de asignación.
asignación.
En el presente texto veremos un listado y descripción de tres tipos adicionales: operadores de cadenas,
operadores lógicos y operadores condicionales.

Operadores de cadenas
Las cadenas de caracteres, o variables de texto, también tienen sus propios operadores para realizar acciones
típicas sobre cadenas. Aunque javascript sólo tiene un operador para cadenas se pueden realizar otras
acciones con una serie de funciones predefinidas en el lenguaje que veremos más adelante.
Concatena dos cadenas, pega la segunda cadena a continuación de la primera.
Ejemplo

cadena1 = "hola"

cadena2 = "mundo"

cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo"

Un detalle importante que se puede ver en este caso es que el operador + sirve para dos usos distintos, si
sus operandos son números los suma, pero si se trata de cadenas las concatena. Esto pasa en general con
todos los operadores que se repiten en el lenguaje, javascript es suficientemente listo para entender que tipo
de operación realizar mediante una comprobación de los tipos que están implicados en élla.
Un caso que resultaría confuso es el uso del operador + cuando se realiza la operación con operadores texto
y numéricos entremezclados. En este caso javascript asume que se desea realizar una concatenación y trata a
los dos operandos como si de cadenas de caracteres se trataran, incluso si la cadena de texto que tenemos
fuese un número. Esto lo veremos más fácilmente con el siguiente ejemplo.

miNumero = 23

miCadena1 = "pepe"

miCadena2 = "456"

resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe"

resultado2 = miNumero + miCadena2 //resultado2 vale "23456"

miCadena2 += miNumero //miCadena2 ahora vale "45623"

 Manual de JavaScript

Como hemos podido ver, también en el caso del operador +=, si estamos tratando con cadenas de texto y 
números entremezclados, tratará a los dos operadores como si fuesen cadenas.

Nota: Como se puede haber imaginado, faltan muchas operaciones típicas a realizar con cadenas, para
las cuales no existen operadores. Es porque esas funcionalidades se obtienen a través de la clase String 
de Javascript,
Javascript, que veremos más adelante.

Operadores lógicos
Estos operadores sirven para realizar operaciones lógicas, que son aquellas que dan como resultado un
 verdadero o un falso, y se utilizan para tomar decisiones
decisiones en nuestros scripts. En vez de trabajar con
números, para realizar este tipo de operaciones se utilizan operandos boleanos, que conocimos
anteriormente, que son el verdadero (true) y el falso (false). Los operadores lógicos relacionan los operandos
boleanos para dar como resultado otro operando boleano, tal como podemos ver en el siguiente ejemplo.
Si tengo hambre y tengo comida entonces me pongo a comer
Nuestro programa Javascript utilizaría en este ejemplo un operando boleano para tomar una decisión.
Primero mirará si tengo hambre, si es cierto (true) mirará si dispongo de comida. Si son los dos ciertos, se
puede poner a comer. En caso de que no tenga comida o que no tenga hambre no comería, al igual que si
no tengo hambre ni comida. El operando en cuestión es el operando Y, que valdrá verdadero (true) en caso
de que los dos operandos valgan verdadero.

Nota: Para no llevarnos a engaño, cabe decir que los operadores lógicos pueden utilizarse en
combinación con tipos de datos distintos de los boleanos, pero en este caso debemos utilizarlos en
expresiones que los conviertan en boleanos. En el siguiente grupo de operadores que vamos a tratar en
este artículo hablaremos sobre los operadores condicionales, que se pueden utili zar junto con los
operadores lógicos para realizar sentencias todo lo complejas que necesitemos. Por ejemplo:

if (x==2 && y!=3){

//la variable x vale 2 y la variable y es distinta de tres
}

En la expresión condicional anterior estamos evaluando dos comprobaciones que se relacionan con un
operador lógico. Por una parte x==2 devolverá un true en caso que la variable x valga 2 y por otra, y!=3
devolverá un true cuando la variable y tenga un valor distinto de 3. Ambas comprobaciones devuelven
un boleano cada una, que luego se le aplica el operador lógico && para comprobar si ambas
comprobaciones se cumplieron al mismo tiempo.
Sobra decir que, para ver ejemplos de operadores condicionales, necesitamos aprender estructuras de
control como if, a las que no hemos llegado todavía.

! Operador NO o negación. Si era true pasa a false y viceversa. && Operador Y, si son los dos verdaderos
 vale verdadero. || Operador O, vale verdadero si por lo menos uno de ellos es verdadero.
 Manual de JavaScript

Ejemplo

miBoleano = true

miBoleano = !miBoleano //miBoleano ahora vale false

tengoHambre = true

tengoComida = true

comoComida = tengoHambre && tengoComida

Operadores condicionales
Sirven para realizar expresiones condicionales todo lo complejas que deseemos. Estas expresiones se
utilizan para tomar decisiones en función de la comparación de varios elementos, por ejemplo si un numero
es mayor que otro o si son iguales.

Nota: Por supuesto, los operadores condicionales sirven también para r ealizar expresiones en las que se
comparan otros tipos de datos. Nada impide comparar dos cadenas, para ver si son iguales o distintas,
por ejemplo. Incluso podríamos comparar boleanos.

Los operadores condicionales se utilizan en las expresiones condicionales para tomas de decisiones. Como
estas expresiones condicionales serán objeto de estudio más adelante será mejor describir los operadores
condicionales más adelante. De todos modos aquí podemos ver la tabla de operadores condicionales.
== Comprueba si dos valores son iguales != Comprueba si dos valores son distintos

Mayor que, devuelve true si el primer operando es mayor que el segundo < Menor que, es true cuando
el elemento de la izquierda es menor que el de la derecha = Mayor igual <= Menor igual

 Veremos ejemplos de operadores condicionales cuando expliquemos estructuras de control, como la

condicional if.
En el siguiente artículo finalizaremos el tema de operadores, explicando los operadores a nivel de bit y la
precedencia de operadores.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 20/09/2001
Disponible online en http://desarrolloweb.com/articulos/20.php
 Manual de JavaScript

Operadores Javascript III

 Vemos el último tipo de operador, a nivel de bit, y la precedencia de operadores (que operadores se
ejecutan antes o después).
Continuamos con el tema de operadores, que ya habíamos iniciado en capítulos anteriores de este manual
de Javascript. En estos momentos ya hemos visto casi todos los tipos de operadores y sólo nos queda
conocer un grupo que realmente no se utiliza casi nunca, que son los operadores de nivel de bit.
De manera adicional, en este texto veremos un asunto de bastante importancia en la programación en
general, que es la precedencia de operadores, que debemos tener en cuenta siempre que utilicemos diversos
operadores en una misma expresión, para que se relacionen entre ellos y se resuelvan de la manera habíamos
planeado.

Operadores a nivel de bit

Estos son muy poco corrientes y es posible que nunca los llegues a utilizar. Su uso se realiza para efectuar
operaciones con ceros y unos. Todo lo que maneja un ordenador son ceros y unos, aunque nosotros
utilicemos números y letras para nuestras variables en realidad estos valores están escritos internamente en
forma de ceros y unos. En algunos caso podremos necesitar realizar operaciones tratando las variables
como ceros y unos y para ello utilizaremos estos operandos. En este manual se nos queda un poco grande
realizar una discusión sobre este tipo de operadores, pero aquí podréis ver estos operadores por si algún día
os hacen falta.
& Y de bits ^ Xor de bits | O de bits << >> >>> >>>= >>= <<= Varias clases de cambios

Precedencia de los operadores

La evaluación de una sentencia de las que hemos visto en los ejemplos anteriores es bastante sencilla y fácil
de interpretar, pero cuando en una sentencia entran en juego multitud de operadores distintos puede haber
una confusión a la hora de interpretarla y dilucidar qué operadores son los que se ejecutan antes que otros.
Para marcar unas pautas en la evaluación de las sentencias y que estas se ejecuten siempre igual y con
sentido común existe la precedencia de operadores, que no es más que el orden por el que se irán
ejecutando las operaciones que ellos representan. En un principio todos los operadores se evalúan de
izquierda a derecha, pero existen unas normas adicionales, por las que determinados operadores se evalúan
antes que otros. Muchas de estas reglas de precedencia están sacadas de las matemáticas y son comunes a
otros lenguajes, las podemos ver a continuación.
() [] . Paréntesis, corchetes y el operador punto que sirve para los objetos ! - ++ -- negación, negativo e
incrementos
/ % Multiplicación división y módulo +- Suma y resta << >> >>> Cambios a nivel de bit < <= >
>= Operadores condicionales == != Operadores condicionales de igualdad y desigualdad & ^ |
Lógicos a nivel de bit && || Lógicos boleanos = += -= *= /= %= <<= >>= >>>= &= ^= !=
 Asignación
En los siguientes ejemplos podemos ver cómo las expresiones podrían llegar a ser confusas, pero con la
tabla de precedencia de operadores podremos entender sin errores cuál es el orden por el que se ejecutan.
 Manual de JavaScript

12 * 3 + 4 - 8 / 2 % 3

En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, con lo que se realizarían
estas operaciones. Primero la multiplicación y luego la división por estar más a la izquierda del módulo.

36 + 4 - 4 % 3

 Ahora el módulo.

36 + 4 - 1

Por último las sumas y las restas de izquierda a derecha.

40 - 1

Lo que nos da como resultado el valor siguiente.

39

De todos modos, es importante darse cuenta que el uso de los paréntesis puede ahorrarnos muchos
quebraderos de cabeza y sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los
operadores. Cuando veamos poco claro el orden con el que se ejecutarán las sentencias podemos utilizarlos
y así forzar que se evalúe antes el trozo de expresión que se encuentra dentro de los paréntesis.
Para acabar con el tema de operadores nos queda por ver un último operador un tanto especial, llamado
typeof .

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 20/09/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Control de tipos
Es importante que conozcamos el tipo de las variables para trabajar sin errores. Vemos cómo
obtenerlo con Javascript.
El listado de operadores que venimos ofreciendo para el Manual de Javascript se completa con el operador
typeof, que veremos a continuación.
Hemos podido comprobar que, para determinados operadores, es importante el tipo de datos que están
 Manual de JavaScript

if (incrementar == "no")
continue
i++
}

Este ejemplo, en condiciones normales contaría hasta desde i=0 hasta i=7, pero cada vez que se ejecuta el
bucle pregunta al usuario si desea incrementar la variable o no. Si introduce "no" se ejecuta la sentencia
continue, con lo que se vuelve al principio del bucle sin llegar a incrementar en 1 la variable i, ya que se
ignorarían las sentencia que hayan por debajo del continue.

Ejemplo adicional de la sentencia break

Un ejemplo más práctico sobre estas instrucciones se puede ver a continuación. Se trata de un bucle FOR 
planeado para llegar hasta 1.000 pero que lo vamos a parar con break cuando lleguemos a 333.

for (i=0;i<=1000;i++){
document.write(i + "<br>")
if (i==333)
break;
}

Podemos ver una página con el ejemplo en funcionamiento.

Con la descripción de las sentencias break y continue hemos podido abarcar todo lo que se debe saber
sobre la creación de bucles en Javascript. Ahora bien, en el siguiente artículo todavía vamos a seguir en el
tema de las estructuras de control, porque queremos ofrecer un ejemplo un poco más avanzado donde
aprenderemos a anidar bucles.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 18/10/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Bucles anidados en Javascript

Explicamos lo que es un bucle anidado, cómo funcionan y para qué sirven. Vemos algunos
ejemplos.
En el Manual de Javascript hemos recorrido ya diversos artículos para hablar de bucles. En este momento
no debería haber ningún problema para poder crear los distintos tipos de bucles sin problemas, no obstante,
queremos dedicar un artículo completo a tratar acerca de uno de los usos más habituales de los bucles, que
podremos encontrar cuando estemos haciendo programas más complejos: la anidación de bucles.
 Anidar un bucle consiste en meter ese bucle dentro de otro. La anidación de bucles es necesaria para
hacer determinados procesamientos un poco más complejos que los que hemos visto en los ejemplos
 Manual de JavaScript

que más tarde o temprano os encontraréis con esa necesidad.

Un bucle anidado tiene una estructura como la que sigue. Vamos a tratar de explicarlo a la vista de estas
líneas:

for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}

La ejecución funcionará de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la
 variable i valdrá 0 y a continuación se inicializa el segundo bucle, con lo que la variable j valdrá también 0.
En cada iteración se imprime el valor de la variable i, un guión ("-") y el valor de la variable j, como las dos
 variables valen 0, se imprimirá el texto "0-0" en la página web.
Debido al flujo del programa en esquemas de anidación como el que hemos visto, el bucle que está anidado
(más hacia dentro) es el que más veces se ejecuta. En este ejemplo, para cada iteración del bucle más
externo el bucle anidado se ejecutará por completo una vez, es decir, hará sus 10 iteraciones. En la página
 web se escribirían estos valores, en la primera iteración del bucle externo y desde el principio:
0-0 0-1 0-2 0-3 0-4 0-5 0-6 0-7 0-8 0-9
Para cada iteración del bucle externo se ejecutarán las 10 iteraciones del bucle interno o anidado. Hemos
 visto la primera iteración, ahora vamos a ver las siguientes iteraciones del bucle externo. En cada una
acumula una unidad en la variable i, con lo que saldrían estos valores.
1-0 1-1 1-2 1-3 1-4 1-5 1-6 1-7 1-8 1-9
 Y luego estos:
2-0 2-1 2-2 2-3 2-4 2-5 2-6 2-7 2-8 2-9
 Así hasta que se terminen los dos bucles, que sería cuando se alcanzase el valor 9-9.
 Veamos un ejemplo muy parecido al anterior, aunque un poco más útil. Se trata de imprimir en la página las
todas las tablas de multiplicar. Del 1 al 9, es decir, la tabla del 1, la del 2, del 3...

for (i=1;i<10;i++){
document.write("<br><b>La tabla del " + i + ":</b><br>")
for (j=1;j<10;j++) {
document.write(i + " x " + j + ": ")
document.write(i*j)
document.write("<br>")
}
}

Con el primer bucle controlamos la tabla actual y con el segundo bucle la desarrollamos. En el primer bucle
 Manual de JavaScript

escribimos una cabecera, en negrita, indicando la tabla que estamos escribiendo, primero la del 1 y luego las
demás en orden ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de cada tabla.
Se puede ver el ejemplo en marcha en este enlace.

Nota: Veremos más cosas con bucles anidados en capítulos posteriores, aunque si queremos
adelantarnos un poco para ver un nuevo ejemplo que afiance estos conocimientos podemos ir viendo
un ejemplo en el Taller de Javascript sobre bucles anidados, donde se construye la tabla con todos los
colores puros en definiciones de 256 colores.

Con este artículo más bien práctico sobre anidación de bucles, terminamos el tema de las estructuras de
control. Ahora pasaremos a otra sección de este Manual de Javascript, en la que trataremos sobre las
funciones.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 10/12/2001
Disponible online en http://desarrolloweb.com/articulos/20.php
 Manual de JavaScript

Funciones en Javascript

Las funciones nos permitirán hacer programas y scripts más optimizados y de fácil mantenimiento.
También son básicas en cualquier lenguaje de programación y les dedicaremos varios artículos.

Funciones en Javascript
Comenzamos con las funciones en Javascript. Definimos el concepto de función y aprendemos a
crearlas y a llamarlas.
Seguimos trabajando y ampliando nuestros conocimientos sobre Javascript. Con lo visto hasta ahora en el
Manual de Javascript ya tenemos una cierta soltura para trabajar en este interesante lenguaje de
programación. Pero todavía nos queda mucho por delante.
 Ahora vamos a ver un tema muy importante, sobretodo para los que no han programado nunca y con
 Javascript están dando sus primeros pasos en el mundo de la programación ya que veremos un concepto
nuevo, el de función, y los usos que tiene. Para los que ya conozcan el concepto de función también será un
capítulo útil, pues también veremos la sintaxis y funcionamiento de las funciones en Javascript.

Qué es una función

 A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden concebir
de forma independiente, y que son más sencillos de resolver que el problema entero. Además, estos suelen
ser realizados repetidas veces a lo largo de la ejecución del programa. Estos procesos se pueden agrupar en
una función, definida para que no tengamos que repetir una y otra vez ese código en nuestros scripts, sino
que simplemente llamamos a la función y ella se encarga de hacer todo lo que debe.
 Así que podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo
proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, en
una página web puede haber una función para cambiar el color del fondo y desde cualquier punto de la
página podríamos llamarla para que nos cambie el color cuando lo deseemos.

Nota: Si queremos, podemos ampliar esta descripción de las funciones en el artículo Concepto de
función.

Las funciones se utilizan constantemente, no sólo las que escribes tú, sino también las que ya están definidas
en el sistema, pues todos los lenguajes de programación suelen tener un montón de funciones para realizar
procesos habituales, como por ejemplo obtener la hora, imprimir un mensaje en la pantalla o convertir
 variables de un tipo a otro. Ya hemos visto alguna función en nuestros sencillos ejemplos anteriores. Por
 Manual de JavaScript

asociada al documento de la página, que escribe un texto en la página.

En los capítulos de funciones vamos primero a ver cómo realizar nuestras propias funciones y cómo
llamarlas luego. A lo largo del manual veremos muchas de las funciones definidas en Javascript que
debemos utilizar para realizar distintos tipos de acciones habituales.

Cómo se escribe una función

Una función se debe definir con una sintaxis especial que vamos a conocer a continuación.

function nombrefuncion (){

instrucciones de la función
...
}

Primero se escribe la palabra function, reservada para este uso. Seguidamente se escribe el nombre de la
función, que como los nombres de variables puede tener números, letras y algún carácter adicional como en
guión bajo. A continuación se colocan entre llaves las distintas instrucciones de la función. Las llaves en el
caso de las funciones no son opcionales, además es útil colocarlas siempre como se ve en el ejemplo, para
que se reconozca fácilmente la estructura de instrucciones que engloba la función.
 Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de etiquetas
<H1> para que quede más resaltado.

function escribirBienvenida(){
document.write("<H1>Hola a todos</H1>")
}

Simplemente escribe en la página un texto. Admitimos que es una función tan sencilla, que el ejemplo no
expresa suficientemente el concepto de función, pero ya veremos otras más complejas. Las etiquetas H1 no
se muestran en la página, sino que son interpretadas como el significado de la misma, en este caso que
escribimos un encabezado de nivel 1. Como estamos escribiendo en una página web, al poner etiquetas
HTML se interpretan como lo que son.

Cómo llamar a una función

Para ejecutar una función la tenemos que invocar en cualquier parte de la página. Con eso conseguiremos
que se ejecuten todas las instrucciones que tiene la función entre las dos llaves.
Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo, así llamaríamos a la
función escribirBienvenida() que acabamos de crear.

escribirBienvenida()

Luego veremos que existen muchas cosas adicionales que debemos conocer de las funciones, como el paso
 Manual de JavaScript

 Javascript.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 02/11/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Dónde colocamos las funciones Javascript

 Vemos la manera de incluir funciones Javascript, de cliente, dentro de las páginas web.
Las funciones son uno de los principales componentes de los programas, en la mayoría de los lenguajes de
programación. En el Manual de Javascript ya hemos comenzado a explicar qué es una función y cómo
podemos crearla e invocarla en este lenguaje. Ahora vamos a tratar un tema que no es tanto de sintaxis y 
programación, sino que tiene más que ver con el uso correcto y habitual que se hace de las funciones en
 Javascript, que no es otro que la colocación del código de las funciones en la página web.
En principio, podemos colocar las funciones en cualquier parte de la página, siempre entre etiquetas
<SCRIPT> , claro está. No obstante existe una limitación a la hora de colocarla con relación a los lugares
desde donde se la llame. Te adelantamos que lo más fácil es colocar la función antes de cualquier llamada a
la misma y así seguro que nunca nos equivocaremos.
Existen dos opciones posibles para colocar el código de una función:
a) Colocar la función en el mismo bloque de script:  En concreto, la función se puede definir en el
bloque <SCRIPT>  donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o
después del código de la función, dentro del mismo bloque <SCRIPT>.

<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>

Este ejemplo funciona correctamente porque la función está declarada en el mismo bloque que su llamada.
b) Colocar la función en otro bloque de script:  También es válido que la función se encuentre en un
bloque <SCRIPT>  anterior al bloque donde está la llamada.

<HTML>
<HEAD>
<TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
 Manual de JavaScript

document.write("Esto va bien")
}
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT>
miFuncion()
</SCRIPT>

</BODY>
</HTML>

 Vemos un código completo sobre cómo podría ser una página web donde tenemos funciones Javascript.
Como se puede comprobar, las funciones están en la cabecera de la página (dentro del HEAD). Éste es un
lugar excelente donde colocarlas, porque se supone que en la cabecera no se van a utilizar todavía y siempre
podremos disfrutar de ellas en el cuerpo porque sabemos seguro que ya han sido declaradas.
Para que quede claro este asunto de la colocación de funciones veamos el siguiente ejemplo, que daría un
error. Examina atentamente el código siguiente, que lanzará un error, debido a que hacemos una llamada a
una función que se encuentra declarada en un bloque <SCRIPT>  posterior.

<SCRIPT>
miFuncion()
</SCRIPT>

<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>

Con esto esperamos haber resuelto todas las dudas sobre la colocación del código de las funciones
 Javascript. En siguientes artículos veremos otros temas interesantes como los parámetros de las funciones.
funciones.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 02/11/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Parámetros de las funciones

 Vemos lo que son los parámetros en las funciones. Vemos
Vemos como definir funciones que reciben
parámetros en el lenguaje Javascript y como hacer llamadas a funciones pasando parámetros.
En el Manual de Javascript hemos
Javascript hemos hablado anteriormente sobre funciones. En concreto este es el tercer
 Manual de JavaScript

Las ideas que hemos explicado anteriormente sobre funciones no son las únicas que debemos aprender para
manejarlas en toda su potencia. Las funciones también tienen una entrada y una salida de datos. En este
artículo veremos cómo podemos enviar datos a las funciones Javascript.

Parámetros
Los parámetros se usan para mandar valores a las funciones. Una función trabajará con los parámetros para
realizar las acciones. Por decirlo de otra manera, los parámetros son los valores de entrada que recibe una
función.
Por poner un ejemplo sencillo de entender, una función que realizase una suma de dos números tendría
como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado
de la suma, pero eso lo veremos más tarde.
 Veamos un ejemplo anterior en el que creábamos una función para mostrar
mostrar un mensaje de bienvenida en la
página web, pero al que ahora le vamos a pasar un parámetro que contendrá el nombre de la persona a la
que hay que saludar.

function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}

Como podemos ver en el ejemplo, para definir en la función un parámetro tenemos que poner el nombre
de la variable que va a almacenar el dato que le pasemos. Esa variable, que en este caso se llama nombre,
tendrá como valor el dato que le pasemos a la función cuando la llamemos. Además, la variable donde
recibimos el parámetro tendrá vida durante la ejecución de la función y dejará de existir cuando la función
termine su ejecución.
Para llamar a una función que tiene parámetros se coloca entre paréntesis el valor del parámetro. Para llamar
a la función del ejemplo habría que escribir:

escribirBienvenida("Alberto García")

 Al llamar a la función así, el parámetro nombre toma como valor "Alberto García" y al escribir el saludo por
pantalla escribirá "Hola Alberto García" entre etiquetas <H1>.
Los parámetros pueden recibir cualquier tipo de datos, numérico, textual, boleano o un objeto. Realmente
no especificamos el tipo del parámetro, por eso debemos tener un cuidado especial al definir las acciones
que realizamos dentro de la función y al pasarle valores, para asegurarnos que todo es consecuente con los
tipos de datos que esperamos tengan nuestras variables o parámetros.

Múltiples parámetros
Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los nombres de
los parámetros separados por comas, dentro de los paréntesis. Veamos rápidamente la sintaxis para que la
función de antes, pero hecha para que reciba dos parámetros, el primero el nombre al que saludar y el
 Manual de JavaScript

segundo el color del texto.

function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>")
document.write("<H1>Hola " + nombre + "</H1>")
  document.write("</FONT>")
}

Llamaríamos a la función con esta sintaxis. Entre los paréntesis colocaremos los valores de los parámetros.

var miNombre = "Pepe"

var miColor = "red"
escribirBienvenida(miNombre,miColor)

He colocado entre los paréntesis dos variables en lugar de dos textos entrecomillados. Cuando colocamos
 variables entre los parámetros en realidad lo que estamos pasando a la función son los valores que
contienen las variables y no las mismas variables.

Los parámetros se pasan por valor

 Al hilo del uso de parámetros en nuestros programas Javascript, tenemos que saber que los parámetros de
las funciones se pasan por valor. Esto quiere decir que estamos pasando valores y no variables. En la
práctica, aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no
cambiará su valor. Se puede ver fácilmente con un ejemplo.

function pasoPorValor(miParametro){
miParametro = 32
document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)

En el ejemplo tenemos una función que recibe un parámetro y que modifica el valor del parámetro
asignándole el valor 32. También tenemos una variable, que inicializamos a 5 y posteriormente llamamos a
la función pasándole esta variable como parámetro. Como dentro de la función modificamos el valor del
parámetro podría pasar que la variable original cambiase de valor, pero como los parámetros no modifican
el valor original de las variables, ésta no cambia de valor.
De este modo, una vez ejecutada la función, al imprimir en pantalla el valor de miVariable se imprimirá el
número 5, que es el valor original de la variable, en lugar de 32 que era el valor con el que habíamos
actualizado el parámetro.
En Javascript sólo se pueden pasar las variables por valor.
 Ahora que hemos aprendido a enviar datos a las funciones, por medio de los parámetros, podemos
 Manual de JavaScript

aprender a hacer funciones que devuelven valores.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 02/11/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Valores de retorno
Las funciones pueden devolver valores, a través de la sentencia return. También vemos un apunte
sobre el ámbito de variables en funciones en Javascript.
Estamos aprendiendo acerca del uso de funciones en Javascript y en estos momentos quizás ya nos
hayamos dado cuenta de la gran importancia que tienen para hacer programas más o menos avanzados. En
este artículo del Manual de Javascript seguiremos aprendiendo cosas sobre funciones y en concreto que con
ellas también se puede devolver valores. Además, veremos algún caso de uso interesante sobre las funciones
que nos puede aclarar un poco el ámbito de variables locales y globales.

Devolución de valores en las funciones

Las funciones en Javascript también pueden retornar valores. De hecho, ésta es una de las utilidades más
esenciales de las funciones, que debemos conocer, no sólo en Javascript sino en general en cualquier
lenguaje de programación. De modo que, al invocar una función, se podrá realizar acciones y ofrecer un
 valor como salida.
Por ejemplo, una función que calcula el cuadrado de un número tendrá como entrada a ese número y como
salida tendrá el valor resultante de hallar el cuadrado de ese número. La entrada de datos en las funciones la
 vimos anteriormente en el artículo sobre parámetros de las funciones. Ahora tenemos que aprender acerca
de la salida.
 Veamos un ejemplo de función que calcula la media de dos números. La función recibirá los dos números y 
retornará el valor de la media.

function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}

Para especificar el valor que retornará la función se utiliza la palabra return seguida de el valor que se desea
devolver. En este caso se devuelve el contenido de la variable resultado, que contiene la media calculada de
los dos números.
Quizás nos preguntemos ahora cómo recibir un dato que devuelve una función. Realmente en el código
fuente de nuestros programas podemos invocar a las funciones en el lugar que deseemos. Cuando una
función devuelve un valor simplemente se sustituye la llamada a la función por ese valor que devuelve. Así
 Manual de JavaScript

pues, para almacenar un valor de devolución de una función, tenemos que asignar la llamada a esa función
como contenido en una variable, y eso lo haríamos con el operador de asignación =.
Para ilustrar esto se puede ver este ejemplo, que llamará a la función media() y guardará el resultado de la
media en una variable para luego imprimirla en la página.

var miMedia
miMedia = media(12,8)
document.write (miMedia)

Múltiples return
En realidad en Javascript las funciones sólo pueden devolver un valor, por lo que en principio no podemos
hacer funciones que devuelvan dos datos distintos.

Nota: en la práctica nada nos impide que una función devuelva más de un valor, pero como sólo
podemos devolver una cosa, tendríamos que meter todos los valores que queremos devolver en una
estructura de datos, como por ejemplo un array . No obstante, eso sería un uso más o menos avanzado
que no vamos a ver en estos momentos.

 Ahora bien, aunque sólo podamos devolver un dato, en una misma función podemos colocar más de un
return. Como decimos, sólo vamos a poder retornar una cosa, pero dependiendo de lo que haya sucedido
en la función podrá ser de un tipo u otro, con unos datos u otros.
En esta función podemos ver un ejemplo de utilización de múltiples return. Se trata de una función que
devuelve un 0 si el parámetro recibido era par y el valor del parámetro si este era impar.

function multipleReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}

Para averiguar si un número es par hallamos el resto de la división al dividirlo entre 2. Si el resto es cero es
que era par y devolvemos un 0, en caso contrario -el número es impar- devolvemos el parámetro recibido.

Ámbito de las variables en funciones

Dentro de las funciones podemos declarar variables. Sobre este asunto debemos de saber que todas las
 variables declaradas en una función son locales a esa función, es decir, sólo tendrán validez durante la
ejecución de la función.
 Manual de JavaScript

Tipos de datos en los arrays

En las casillas de los arrays podemos guardar datos de cualquier tipo. Podemos ver un array donde
introducimos datos de tipo carácter.

miArray[0] = "Hola"
miArray[1] = "a"
miArray[2] = "todos"

Incluso, en Javascript podemos guardar distintos tipos de datos en las casillas de un mismo array. Es decir,
podemos introducir números en unas casillas, textos en otras, boleanos o cualquier otra cosa que deseemos.

miArray[0] = "desarrolloweb.com"
miArray[1] = 1275
miArray[1] = 0.78
miArray[2] = true

Declaración e inicialización resumida de Arrays

En Javascript tenemos a nuestra disposición una manera resumida de declarar un array y cargar valores en
un mismo paso. Fijémonos en el código siguiente:

var arrayRapido = [12,45,"array inicializado en su declaración"]

Como se puede ver, se está definiendo una variable llamada arrayRapido y estamos indicando en los
corchetes varios valores separados por comas. Esto es lo mismo que haver declarado el array con la función
 Array() y luego haberle cargado los valores uno a uno.
En el próximo artículo seguiremos viendo cosas relacionadas con los arrays, en concreto aprenderemos a
acceder a la longitud de un array .

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 22/12/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Longitud de los arrays

 Aprendemos más cosas sobre el funcionamiento de los arrays y en concreto vemos como utilizar su
propiedad length para acceder al número de casillas que tiene.
En el artículo anterior del Manual de Javascript empezamos a explicar el concepto de array y su utilización
en Javascript. En este artículo vamos a continuar con el tema, mostrando el uso de su propiedad length.
 Manual de JavaScript

Todos los arrays en javascript, aparte de almacenar el valor de cada una de sus casillas, también almacenan el
número de posiciones que tienen. Para ello utilizan una propiedad del objeto array, la propiedad length. Ya
 veremos en objetos qué es una propiedad, pero para nuestro caso podemos imaginarnos que es como una
 variable, adicional a las posiciones, que almacena un número igual al número de casillas que tiene el array.
Para acceder a una propiedad de un objeto se ha de utilizar el operador punto. Se escribe el nombre del
array que queremos acceder al número de posiciones que tiene, sin corchetes ni paréntesis, seguido de un
punto y la palabra length.

var miArray = new Array()

miArray[0] = 155
miArray[1] = 499
miArray[2] = 65

document.write("Longitud del array: " + miArray.length)

Este código imprimiría en pantalla el número de posiciones del array, que en este caso es 3. Recordamos
que un array con 3 posiciones abarca desde la posición 0 a la 2.
Es muy habitual que se utilice la propiedad length para poder recorrer un array por todas sus posiciones.
Para ilustrarlo vamos a ver un ejemplo de recorrido por este array para mostrar sus valores.

for (i=0;i<miArray.length;i++){
document.write(miArray[i])
}

Hay que fijarse que el bucle for se ejecuta siempre que i valga menos que la longitud del array, extraída de su
propiedad length.
El siguiente ejemplo nos servirá para conocer mejor los recorridos por los arrays, el funcionamiento de la
propiedad length y la creación dinámica de nuevas posiciones. Vamos a crear un array con 2 posiciones y 
rellenar su valor. Posteriormente introduciremos un valor en la posición 5 del array. Finalmente
imprimiremos todas las posiciones del array para ver lo que pasa.

var miArray = new Array(2)

miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"

miArray[5] = "Brasil"

for (i=0;i<miArray.length;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("<br>")
}
 Manual de JavaScript

El ejemplo es sencillo. Se puede apreciar que hacemos un recorrido por el array desde 0 hasta el número de
posiciones del array (indicado por la propiedad length). En el recorrido vamos imprimiendo el número de la
posición seguido del contenido del array en esa posición. Pero podemos tener una duda al preguntarnos
cuál será el número de elementos de este array, ya que lo habíamos declarado con 2 y luego le hemos
introducido un tercero en la posición 5. Al ver la salida del programa podremos contestar nuestras
preguntas. Será algo parecido a esto:
Posición 0 del array: Colombia Posición 1 del array: Estados Unidos Posición 2 del array: null Posición 3 del
array: null Posición 4 del array: null Posición 5 del array: Brasil
Se puede ver claramente que el número de posiciones es 6, de la 0 a la 5. Lo que ha ocurrido es que al
introducir un dato en la posición 5, todas las casillas que no estaban creadas hasta la quinta se crean
también.
Las posiciones de la 2 a la 4 están sin inicializar. En este caso nuestro navegador ha escrito la palabra null 
para expresar esto, pero otros navegadores podrán utilizar la palabra undefined. Ya veremos más adelante
qué es este null y dónde lo podemos utilizar, lo importante ahora es que comprendas cómo trabajan los
arrays y los utilices correctamente.
Podemos ver el efecto de este script en tu navegador en una página a parte.
Continuaremos el tema de arrays en la siguiente entrega de este manual: Arrays multidimensionales.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 22/12/2001
Disponible online en http://desarrolloweb.com/articulos/20.php

Arrays multidimensionales en Javascript

 Vemos qué son los arrays multidimensionales (arrays de más de una dimensión) y cómo
utilizarlos. Además explicamos cómo inicializar arrays en su declaración.
Como estamos viendo, los arrays son bastante importantes en Javascript y también en la mayoría de los
lenguajes de programación. En concreto ya hemos aprendido a crear arrays y utilizarlos en artículos
anteriores del Manual de Javascript. Pero aun nos quedan algunas cosas importantes que explicar, como son
los arrays de varias dimensiones.
Los arrays multidimensionales son un estructuras de datos que almacenan los valores en más de una
dimensión. Los arrays que hemos visto hasta ahora almacenan valores en una dimensión, por eso para
acceder a las posiciones utilizamos tan solo un índice. Los arrays de 2 dimensiones guardan sus valores, por
decirlo de alguna manera, en filas y columnas y por ello necesitaremos dos índices para acceder a cada una
de sus posiciones.
Dicho de otro modo, un array multidimensional es como un contenedor que guardara más valores para cada
posición, es decir, como si los elementos del array fueran a su vez otros arrays.
 Manual de JavaScript

definir arrays que donde en cada una de sus posiciones habrá otro array. En nuestros programas podremos
utilizar arrays de cualquier dimensión, veremos a continuación cómo trabajar con arrays de dos
dimensiones, que serán los más comunes.
En este ejemplo vamos a crear un array de dos dimensiones donde tendremos por un lado ciudades y por el
otro la temperatura media que hace en cada una durante de los meses de invierno.

var temperaturas_medias_ciudad0 = new Array(3)

temperaturas_medias_ciudad0[0] = 12
temperaturas_medias_ciudad0[1] = 10
temperaturas_medias_ciudad0[2] = 11

var temperaturas_medias_ciudad1 = new Array (3)

temperaturas_medias_ciudad1[0] = 5
temperaturas_medias_ciudad1[1] = 0
temperaturas_medias_ciudad1[2] = 2

var temperaturas_medias_ciudad2 = new Array (3)

temperaturas_medias_ciudad2[0] = 10
temperaturas_medias_ciudad2[1] = 8
temperaturas_medias_ciudad2[2] = 10

Con las anteriores líneas hemos creado tres arrays de 1 dimensión y tres elementos, como los que ya
conocíamos. Ahora crearemos un nuevo array de tres elementos e introduciremos dentro de cada una de
sus casillas los arrays creados anteriormente, con lo que tendremos un array de arrays, es decir, un array de 2
dimensiones.

var temperaturas_cuidades = new Array (3)

temperaturas_cuidades[0] = temperaturas_medias_ciudad0
temperaturas_cuidades[1] = temperaturas_medias_ciudad1
temperaturas_cuidades[2] = temperaturas_medias_ciudad2

 Vemos que para introducir el array entero hacemos referencia al mismo sin paréntesis ni corchetes, sino
sólo con su nombre. El array temperaturas_cuidades es nuestro array bidimensinal.
También es interesante ver cómo se realiza un recorrido por un array de dos dimensiones. Para ello tenemos
que hacer un bucle que pase por cada una de las casillas del array bidimensional y dentro de éstas hacer un
nuevo recorrido para cada una de sus casillas internas. Es decir, un recorrido por un array dentro de otro.
El método para hacer un recorrido dentro de otro es colocar un bucle dentro de otro, lo que se llama un
bucle anidado. En este ejemplo vamos a meter un bucle FOR dentro de otro. Además, vamos a escribir los
resultados en una tabla, lo que complicará un poco el script, pero así podremos ver cómo construir una
tabla desde Javascript a medida que realizamos el recorrido anidado al bucle.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>");

for (i=0;i<temperaturas_cuidades.length;i++){
document.write("<tr>")
 Manual de JavaScript

for (j=0;j<temperaturas_cuida des[i].length;j++){

document.write("<td>" + temperaturas_cuidades[i][j] + "</td>")
}
document.write("</tr>")
}
document.write("</table>")

Este script resulta un poco más complejo que los vistos anteriormente. La primera acción consiste en
escribir la cabecera de la tabla, es decir, la etiqueta <TABLE>  junto con sus atributos. Con el primer bucle
realizamos un recorrido a la primera dimensión del array y utilizamos la variable i para llevar la cuenta de la
posición actual. Por cada iteración de este bucle escribimos una fila y para empezar la fila abrimos la
etiqueta <TR>. Además, escribimos en una casilla el numero de la ciudad que estamos recorriendo en ese
momento. Posteriormente ponemos otro bucle que va recorriendo cada una de las casillas del array en su
segunda dimensión y escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro de su
etiqueta <TD>. Una vez que acaba el segundo bucle se han impreso las tres temperaturas y por lo tanto la fila
está terminada. El primer bucle continúa repitiéndose hasta que todas las ciudades están impresas y una vez
terminado cerramos la tabla.

Nota: Habrás podido observar que en ocasiones generar código HTML desde Javascript se hace
complejo. Pero el problema no es solo que el código sea difícil de producir, sino lo peor es que creas un
código difícil de mantener, en el que se mezcla tanto la parte de la programación en Javascript con la
parte de la presentación en HTML. Lo que has visto además es solo un código bien simple, con una
tabla realmente elemental, imagina qué pasaría cuando la tabla o los datos fueran más complejos.
 Afortunadamente, hay maneras de generar código HTML de salida mejores que las que hemos visto
ahora, aunque resulta un poco avanzado para el momento en el que estamos. De todos modos, te
dejamos un enlace al manual del sistema de templates Javascript Handlebars, que es una alternativa de
librería sencilla para generar salida en HTML desde Javascript.

Podemos ver el ejemplo en marcha y examinar el código del script entero.

Inicialización de arrays
Para terminar con el tema de los arrays vamos a ver una manera de inicializar sus valores a la vez que lo
declaramos, así podemos realizar de una manera más rápida el proceso de introducir valores en cada una de
las posiciones del array.
El método normal de crear un array vimos que era a través del objeto Array, poniendo entre paréntesis el
número de casillas del array o no poniendo nada, de modo que el array se crea sin ninguna posición. Para
introducir valores a un array se hace igual, pero poniendo entre los paréntesis los valores con los que
deseamos rellenar las casillas separados por coma. Veámoslo con un ejemplo que crea un array con los
nombres de los días de la semana.

var diasSemana = new Array("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Domingo")

El array se crea con 7 casillas, de la 0 a la 6 y en cada casilla se escribe el dia de la semana correspondiente
(Entre comillas porque es un texto).
 Manual de JavaScript

la asignación de valores a propiedades que no han sido creadas previamente.

Tengo mi objeto coche:

var coche = {
color: "rojo",
marca: "Opel"
}

 Ahora podría crear nuevas propiedades en ese objeto asignando valores a las propiedades que no existían
previamente.

coche.anoFabricacion = 2014;

Los métodos los creas asignando funciones:

coche.arrancar = function(){
alert("rum rum");
}

Los métodos y funciones que acabamos de crear son tan válidos como los que ya estuvieran en mi objeto
cuando fue definido por medio de su literal. Podré acceder a sus elementos con la notación punto, que ya
conoces.

console.log(coche.color);
console.log(coche.anoFabricacion);
coche.arrancar();

Ejemplo para practicar con literales de objeto

En el siguiente código ponemos en marcha los nuevos conocimientos que has adquirido sobre literales de
objeto en Javascript.

var miObjeto = {
propiedad1: "Algo",
propiedad2: "Otra cosa",
propiedad3: true,
propiedad4: 344,

metodo1: function(){
alert("Ejecutaste metodo1");
},
metodo2: funcionMetodo2
}
 Manual de JavaScript

function funcionMetodo2(){
//puedo usar la variable this para acceder a mis propias propiedades o métodos
this.propiedad2 = "Esto lo he modificado desde el método metodo2";
}

//Veamos el valor de esas propiedades

console.log(miObjeto.propiedad1);
console.log(miObjeto.propiedad2);

//ejecutemos algún método

miObjeto.metodo1();
miObjeto.metodo2();

//creamos nuevas propiedades

miObjeto.otraPropiedad = "Esto está creado a posteriori";

//creamos nuevos métodos

miObjeto.otroMetodo = function(){
console.log("ejecutaste otro método");
}

//veamos el contenido de todo el objeto

console.log(miObjeto);

Eso es todo por el momento, espero que te hayamos aclarado algo.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 31/10/2014
Disponible online en http://desarrolloweb.com/articulos/literales-objeto-javascript.html 

for in en Javascript
Recorridos for in a propiedades de objetos en Javascript. Cómo iterar por las propiedades y los
 valores de las propiedades de un objeto, de manera genérica en Javascript con el bucle for ... in.
En Javascript no existen arrays asociativos y como sabes, éstos son siempre buenos aliados como recursos
para la programación. Si queremos usar algo parecido a un array asociativo tendremos que utilizar las
construcciones de objetos. De todos modos, con lo que nos ofrece el lenguaje somos capaces de realizar
todas las cosas que en otros lenguajes haces con los arrays asociativos.
En este artículo pretendemos explicarte cómo realizar un recorrido genérico a todas las propiedades
presentes en un objeto, junto con sus valores. Ese recorrido es "genérico", es decir, es independiente del
número de propiedades que se encuentre en el objeto que estamos recorriendo y es independiente también
de sus nombres de propiedad o sus valores.

Nota: Por si no lo sabes, los arrays asociativos son aquellos que no tienen índices numéricos sino
 Manual de JavaScript

cuenta. De momento entonces olvida la mención a los arrays asociativos y piensa solo en objetos y sus
propiedades.

Bucle for ... in

En Javascript hay una construcción especial del bucle for de toda la vida, que te permite recorrer todas las
propiedades de un objeto. Es parecido a lo que en otros lenguajes tenemos en el bucle foreach (Javascript
también tiene el forEach pero es solo para arrays y no es un bucle sino un método de arrays, que sirve para
iterar, pero no es una estructura de control como tal). Su sintaxis es la siguiente:

for (propiedad in objeto){

//código a repetir por el bucle.
//dentro de este código la variable "propiedad" contiene la propiedad actual
//actual en cada uno de los pasos de la iteración.
}

No hay mucho más que explicar sobre esta estructura del bucle for-in, solo decir que de esta manera tal cual
puedes acceder a los nombres de las propiedades del objeto. Gracias al bucle, el código que se incluye
dentro del for se ejecutará una vez por cada una de las propiedades del objeto.
Habrás notado que hemos dicho que así podrás acceder a las propiedades. No te preocupes que para
acceder a sus valores tendrás que usar un truquillo. Lo veremos también en este artículo, pero no nos
adelantemos.

Bucle para acceder a las propiedades de un objeto

 Veamos una aplicación de este bucle for in con un ejemplo sencillo que nos arroje algo de luz.
Tenemos un objeto creado a partir de un literal de objeto.

var diasMes = {
enero: 31,
febrero: 28,
marzo: 31,
abril: 30,
mayo: 31
}
 Manual de JavaScript

toLowerCase()

Pone todas los caracteres de un string en minúsculas.

toUpperCase()

Pone todas los caracteres de un string en mayúsculas.

toString()

Este método lo tienen todos los objetos y se usa para convertirlos en cadenas.
Hasta aquí hemos visto los métodos que nos ayudarán a tratar cadenas. Ahora vamos a ver otros métodos
que son menos útiles, pero hay que indicarlos para que quede constancia de ellos. Todos sirven para aplicar
estilos a un texto y es como si utilizásemos etiquetas HTML. Veamos cómo.

anchor(name)

Convierte en un ancla (sitio a donde dirigir un enlace) una cadena de caracteres usando como el atributo
name de la etiqueta <A> lo que recibe por parámetro.

big()

 Aumenta el tamaño de letra del string.

string. Es como si colocásemos en un string al principio
principio la etiqueta <BIG> y 
al final </BIG>.

blink()

Para que parpadee el texto del string, es como utilizar la etiqueta <BLINK>. Solo vale para Netscape.

bold()

Como si utilizásemos la etiqueta <B>.

fixed()

Para utilizar una fuente monoespaciada, etiqueta <TT>.

fontColor(color)

Pone la fuente a ese color. Como utilizar la etiqueta <FONT color=el_color_indicado>> .

color=el_color_indicado

fontSize(tamaño)
 Manual de JavaScript

italics()

Pone la fuente en cursiva. Etiqueta <I>.

link(url)

Pone el texto como un enlace a la URL indicada. Es como si utilizásemos la etiqueta <A> con el atributo
href indicado como parámetro.

small()

Es como utilizar la etiqueta <SMALL>

strike()

Como utilizar la etiqueta <STRIKE> , que sirve para que el texto aparezca tachado.

sub()

 Actualiza el texto como si se estuviera

estuviera utilizando la etiqueta <SUB>, de subíndice.

sup()

Como si utilizásemos la etiqueta <SUP>, de superíndice.

Ejemplos de funcionamiento de los objetos de clase String

Hasta ahora hemos visto muchos métodos interesantes de elementos de tipo String, pero no estará de más
pasar a la práctica para entender todo mucho mejor. Así pues, veamos unos ejemplos sobre cómo se utilizan
los métodos y propiedades del objeto String.

Ejemplo de strings 1

 Vamos a escribir el contenido de un string con un carácter

carácter separador ("-") entre cada uno de los caracteres
del string.

var miString = "Hola Amigos"

var result = ""

for (i=0;i<miString.length-1;i++) {
result += miString.charAt(i)
result += "-"
}
result += miString.charAt(miString.length - 1)
 Manual de JavaScript

Primero creamos dos variables, una con el string a recorrer y otra con un string vacío, donde guardaremos
el resultado. Luego hacemos un bucle que recorre desde el primer hasta el penúltimo carácter del string -
utilzamos la propiedad length para conocer el número de caracteres del string- y en cada iteración
colocamos un carácter del string seguido de un carácter separador "-". Como aun nos queda el último
carácter por colocar lo ponemos en la siguiente línea después del bucle. Utilizamos la función charAt para
acceder a las posiciones del string. Finalmente imprimimos en la página el resultado.
Podemos ver
Podemos ver el ejemplo en funcionamiento en una página a parte.
parte.

Ejemplo de strings 2

 Vamos a hacer un script que rompa un string en dos mitades y las imprima por pantalla. Las mitades
mitades serán
iguales, siempre que el string tenga un número de caracteres par. En caso de que el número de caracteres sea
impar no se podrá hacer la mitad exacta, pero partiremos el string lo más aproximado a la mitad.

var miString = "0123456789"

var mitad1,mitad2

posicion_mitad = miString.length / 2

mitad1 = miString.substring(0,posicion_mitad)
mitad2 = miString.substring(posicion_mitad,miString.length)

document.write(mitad1 + "<br>" + mitad2)

Las dos primeras líneas sirven para declarar las variables que vamos a utilizar e inicializar el string a partir.
En la siguiente línea hallamos la posición de la mitad del string.
En las dos siguientes líneas es donde realizamos el trabajo de poner en una variable la primera mitad del
string y en la otra la segunda. Para ello utilizamos el método substring pasándole como inicio y fin en el
primer caso desde 0 hasta la mitad y en el segundo desde la mitad hasta el final. Para finalizar imprimimos
las dos mitades con un salto de línea entre ellas.
Podemos ver
Podemos ver el ejemplo en funcionamiento en una página a parte.
parte.
Una vez sabemos manejar los objetos de la clase string, podemos pasar a ver otras de las clases nativas de
 Javascript, como la clase Date.
Date.

Este artículo es obra de Miguel Angel Alvarez 

Fue publicado por primera vez en 21/03/2002 
Disponible online en http://desarrolloweb.com/articulos/objetos-string-javascript.html 

Clase Date en Javascript

Explicamos la clase Date de Javascript, que se utiliza para el manejo de fechas y horas.
 Manual de JavaScript

Exploramos sus diversos métodos y propiedades de los objetos Date, con los que realizar cálculos
en el tiempo.
 Vamos a empezar a relatar todas las cosas que debes saber sobre otro de los objetos nativos de Javascript, el
que implementa la clase Date.
Sobre la clase Date recae todo el trabajo con fechas en Javascript, como obtener una fecha, el día la hora
actuales y otras cosas. Para trabajar con fechas necesitamos instanciar un objeto de la clase Date y con él ya
podemos realizar las operaciones que necesitemos.
Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado podemos crear el objeto
con el día y hora actuales y por otro podemos crearlo con un día y hora distintos a los actuales. Esto
depende de los parámetros que pasemos al construir los objetos.
Para crear un objeto fecha con el día y hora actuales colocamos los paréntesis vacíos al llamar al constructor
de la clase Date.

miFecha = new Date()

Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el
momento con que inicializar el objeto. Hay varias maneras de expresar un día y hora válidas, por eso
podemos construir una fecha guiándonos por varios esquemas. Estos son dos de ellos, suficientes para crear
todo tipo de fechas y horas.

miFecha = new Date(año,mes,dia,hora,minutos,segundos)

miFecha = new Date(año,mes,dia)

Los valores que debe recibir el constructor son siempre numéricos. Un detalle, el mes comienza por 0, es
decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.
Los objetos de la clase Date no tienen propiedades pero si un montón de métodos, vamos a verlos ahora.

getDate()

Devuelve el día del mes.

getDay()

Devuelve el día de la semana.

getHours()

Retorna la hora.
 Manual de JavaScript

Devuelve los minutos.

getMonth()

Devuelve el mes (atención al mes que empieza por 0).

getSeconds()

Devuelve los segundos.

getTime()

Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto
al que se le pasa el mensaje.

getYear()

Retorna el año, al que se le ha restado 1900. Por ejemplo, para el 1995 retorna 95, para el 2005 retorna 105.
Este método está obsoleto en Netscape a partir de la versión 1.3 de Javascript y ahora se utiliza
getFullYear().

getFullYear()

Retorna el año con todos los dígitos. Usar este método para estar seguros de que funcionará todo bien en
fechas posteriores al año 2000.

setDate()

 Actualiza el día del mes.

setHours()

 Actualiza la hora.

setMinutes()

Cambia los minutos.

setMonth()

Cambia el mes (atención al mes que empieza por 0).

setSeconds()
 Manual de JavaScript

Cambia los segundos.

setTime()

 Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de enero de 1970.

setYear()

Cambia el año recibe un número, al que le suma 1900 antes de colocarlo como año de la fecha. Por ejemplo,
si recibe 95 colocará el año 1995. Este método está obsoleto a partir de Javascript 1.3 en Netscape. Ahora se
utiliza setFullYear(), indicando el año con todos los dígitos.

setFullYear()

Cambia el año de la fecha al número que recibe por parámetro. El número se indica completo ej: 2005 o
1995. Utilizar este método para estar seguros que todo funciona para fechas posteriores a 2000.
Como habréis podido apreciar, hay algún método obsoleto por cuestiones relativas al año 2000: setYear() y 
getYear(). Estos métodos se comportan bien en Internet Explorer y no nos dará ningún problema el
utilizarlos. Sin embrago, no funcionarán correctamente en Netscape, por lo que es interesante que
utilicemos en su lugar los métodos getFullYear() y setFullYear(), que funcionan bien en Netscape e Internet
Explorer.

Ejemplos de trabajo con fechas en Javascript

 Visto lo anterior, ahora podemos poner los conocimientos en la práctica en un ejemplo completo de trabajo
con objetos de la clase Date.
En este ejemplo vamos a crear dos fechas, una con el instante actual y otra con fecha del pasado. Luego las
imprimiremos las dos y extraeremos su año para imprimirlo también. Luego actualizaremos el año de una de
las fechas y la volveremos a escribir con un formato más legible.

//en estas líneas creamos las fechas

miFechaActual = new Date()
miFechaPasada = new Date(1998,4,23)

//en estas líneas imprimimos las fechas.

document.write (miFechaActual)
document.write ("<br>")
document.write (miFechaPasada)

//extraemos el año de las dos fechas

anoActual = miFechaActual.getFullYear()
anoPasado = miFechaPasada.getFullYear()

//Escribimos en año en la página

document.write("<br>El año actual es: " + anoActual)
document.write("<br>El año pasado es: " + anoPasado)
 Manual de JavaScript

var item2 = document.createElement('li');

var itemlink2 = document.createElement('a');
itemlink2.setAttribute('href', '#');
itemlink2.appendChild(document.createTextNode('print'));
itemlink2.onclick = function(){window.print();}
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}

Puedes optimizar esta función separando cada tarea con su propia función:

function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = createLink('#', 'close', closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = createLink('#', 'print', printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}

function printWindow(){
window.print();
}

function closeWindow() {
window.close();
}

function createLink(url,text,func){
var temp = document.createElement('a');
temp.setAttribute('href', url);
temp.appendChild(document.createTextNode(text));
temp.onclick = func;
return temp;
}

Utiliza inteligentemente los nombres de variables y funciones

Esta es un técnica esencial de programación, utiliza nombres de variables y funciones que sean totalmente
descriptivos e incluso otra persona pueda llegar a plantearse que función realizan antes de ver el código.
Recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras, en este caso
concreto de es más típico el uso de mayúsculas debido a la sintaxis del lenguaje, (ej.
getElementsByTagName()).
 Manual de JavaScript

CambioFormatoFecha();
cambio_formato_fecha();

Comenta el código
Gracias a los comentarios puedes librarte de más de un quebradero de cabeza, es mejor resolver el problema
una única vez.
Cómo puedes comprobar en cualquier libro de programación cada línea tiene comentarios explicando su
objetivo.

Diferencia las variables dependiendo de su importancia

Este paso es simple: Coloca aquellas variables que son usadas durante todo el script en la cabecera del
código, de esta maneras siempre sabrás donde encontrar estas variables que son las que determinan el
resultado de nuestro código.

function toolLinks(){
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;

// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#

tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);
printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
document.body.appendChild(tools);
}

Separa el texto del código

Puedes separar el texto del código, utilizando un documento llamado texto.js en formato JSON.
Un ejemplo que funciona muy bien podría ser:

var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
 Manual de JavaScript

'noQAmessage' : 'You have no Questions or Answers yet',

'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading' : 'My Questions',
'answersHeading' : 'My Answers',
'seeAllAnswers' : 'See all your Answers',
'seeAllQuestions' : 'See all your Questions',
'refresh': 'refresh'
},
'es': {
'homePageAnswerLink':'Responde una pregunta',
'homePageQuestionLink':'Haz una pregunta',
'contactHove' : 'Cargando datos...',
'noQAmessage' : 'No quedan preguntas',
'questionsDefault': 'Quedan preguntas por responder',
'answersDefault': 'No quedan preguntas pendientes',
'questionHeading' : 'Mis preguntas',
'answersHeading' : 'Mis respuestas',
'seeAllAnswers' : 'Ver todas las respuestas',
'seeAllQuestions' : 'Ver todas las preguntas',
'refresh': 'Refrescar'
},
'fr': {
}
'de': {
}
};

Esto permitiría a cualquiera que no es programador traducir el texto del script, cambiando unicamente las
etiquetas sin necesidad de acceder al código.

Documenta el código
Escribe una buena documentacion de tu script / librería o efecto. Una buena documentación da calidad al
código, sino preguntate porque existe la clásica documentación en cualquier API con todas las posibles
propiedades y parametros, pero sin duda lo mejor de todo es explicar con ejemplos que contienen una lista
de posibilidades.

Este artículo es obra de Manu Gutierrez 

Fue publicado por primera vez en 20/12/2007 
Disponible online en http://desarrolloweb.com/articulos/consejos-para-escribir-codigo-javascript.html