[JavaScript] Introduccion a Javascript

Iniciado por alexander1712, Enero 25, 2013, 06:34:42 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Estructuras de control en Javascript

Introducción a las estructuras de control. Enumeramos las que tenemos disponibles en Javascript.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Los scripts vistos hasta ahora en el Manual de Javascript han sido tremendamente sencillos y lineales: se iban ejecutando las sentencias simples una detrás de la otra desde el principio hasta el fin. Sin embargo, esto no tiene porque ser siempre así y de hecho, en la mayoría de los casos las cosas son bastante más complejas.

Si tenemos alguna experiencia en la programación sabremos que en los programas generalmente se necesitará hacer cosas distintas dependiendo del estado de nuestras variables o realizar un mismo proceso muchas veces sin escribir las mismas líneas de código una y otra vez. Para realizar cosas más complejas en nuestros scripts se utilizan las estructuras de control. Con ellas podemos realizar tomas de decisiones y bucles. En los siguientes capítulos vamos a conocer las distintas estructuras de control que existen en Javascript.

Toma de decisiones

Nos sirven para realizar unas acciones u otras en función del estado de las variables. Es decir, tomar decisiones para ejecutar unas instrucciones u otras dependiendo de lo que esté ocurriendo en ese instante en nuestros programas.

Por ejemplo, dependiendo si el usuario que entra en nuestra página es mayor de edad o no lo es, podemos permitirle o no ver los contenidos de nuestra página.

Si edad es mayor que 18 entonces
   Te dejo ver el contenido para adultos
Si no
   Te mando fuera de la página

En Javascript podemos tomar decisiones utilizando dos enunciados distintos.

    IF
    SWITCH


Bucles
Los bucles se utilizan para realizar ciertas acciones repetidamente. Son muy utilizados a todos los niveles en la programación. Con un bucle podemos por ejemplo imprimir en una página los números del 1 al 100 sin necesidad de escribir cien veces el la instrucción imprimir.

Desde el 1 hasta el 100
   Imprimir el número actual


En javascript existen varios tipos de bucles, cada uno está indicado para un tipo de iteración distinto y son los siguientes:

    FOR
    WHILE
    DO WHILE


Como hemos señalado ya, las estructuras de control son muy importantes en Javascript y en cualquier lenguaje de programación. Es por ello que en los siguientes capítulos veremos cada una de estas estructuras detenidamente, describiendo su uso y ofreciendo algunos ejemplos. Comenzaremos con la estructura de control if.

Enero 25, 2013, 06:50:20 PM #21 Ultima modificación: Mayo 11, 2014, 07:30:57 PM por Destructor.cs
Estructura IF en Javascript

Vemos cómo trabajar con la estrutura de control IF en Javascript.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
En el Manual de Javascript de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta ya empezamos a explicar lo que son las estructuras de control. En el presente artículo vamos a dedicarnos a mostrar cómo funciona la sentencia if, que es la estructura más habitual de las utilizadas para tomar decisiones en programas informáticos.

IF es una estructura de control utilizada para tomar decisiones. Es un condicional que sirve para realizar unas u otras operaciones en función de una expresión. Funciona de la siguiente manera, primero se evalúa una expresión, si da resultado positivo se realizan las acciones relacionadas con el caso positivo.

La sintaxis de la estructura IF es la siguiente.

Nota: Todas las estructuras de control se escriben en minúsculas en Javascript. Aunque algunas veces para destacar el nombre de la estructura la podamos escribir en el texto del manual con letras mayúsculas, en el código de nuestros scripts siempre tenemos que ponerlo en minúsculas. En caso contrario recibiremos un mensaje de error.

Código: javascript
if (expresión) {
   //acciones a realizar en caso positivo
   //...
}


Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluación de la sentencia devuelva resultados negativos.

Código: javascript
if (expresión) {
   //acciones a realizar en caso positivo
   //...
} else {
   //acciones a realizar en caso negativo
   //...
}


Fijémonos en varias cosas. Para empezar vemos como con unas llaves engloban las acciones que queremos realizar en caso de que se cumplan o no las expresiones. Estas llaves han de colocarse siempre, excepto en el caso de que sólo haya una instrucción como acciones a realizar, que son opcionales.

Nota: Aunque las llaves para englobar las sentencias a ejecutar tanto en el caso positivo como negativo sean opcionales cuando queremos ejecutar una única sentencia, la recomendación es colocarlas siempre, porque obtendremos así un código fuente más claro. Por ejemplo:

Veamos el código siguiente:

Código: javascript
if (llueve)
   alert("Cae agua");


Sería exactamente igual que este código:
Código: javascript

if (llueve){
   alert("Cae agua");
}


O incluso, igual a este otro:

Código: javascript
if (llueve) alert("Cae agua");


Sin embargo, cuando utilizamos las llaves, el código queda bastante más claro, porque se puede apreciar en un rápido vistazo qué instrucciones están dependiendo del caso positivo del if. Esto es un detalle que ahora quizás no tenga mucha importancia, pero que se agradecerá cuando el programa sea más complejo o cuando varios programadores se encarguen de tocar un mismo código.

Otro detalle que salta a la vista es el sangrado (margen) que hemos colocado en cada uno de los bloques de instrucciones a ejecutar en los casos positivos y negativos. Este sangrado es totalmente opcional, sólo lo hemos hecho así para que la estructura IF se comprenda de una manera más visual. Los saltos de línea tampoco son necesarios y se han colocado también para que se vea mejor la estructura. Perfectamente podríamos colocar toda la instrucción IF en la misma línea de código, pero eso no ayudará a que las cosas estén claras.

Nota: Nosotros, así como lo haría cualquier persona con cierta experiencia en el área de programación, aconsejamos que se utilicen los sangrados y saltos de línea necesarios para que las instrucciones se puedan entender mejor. Quizás el día que realizas un código tengas claro qué has hecho y por qué es así, pero dentro de un mes, cuando tengas que releer ese código, quizás te acuerdes menos de lo que hiciste en tus scripts y agradecerás que tengan un formato amigable para que se puedan leer con facilidad por las personas. Si trabajas en equipo estas recomendaciones serán todavía más importantes, puesto que todavía es más complicado leer código fuente que han realizado otras personas.

Veamos algún ejemplo de condicionales IF.

Código: javascript
if (dia == "lunes")
   document.write ("Que tengas un feliz comienzo de semana")


Si es lunes nos deseará una feliz semana. No hará nada en caso contrario. Como en este ejemplo sólo indicamos una instrucción para el caso positivo, no hará falta utilizar las llaves (aunque sí sería recomendable haberlas puesto). Fíjate también en el operador condicional que consta de dos signos igual.

Vamos a ver ahora otro ejemplo, un poco más largo.

Código: javascript
if (credito >= precio) {
   document.write("has comprado el artículo " + nuevoArtículo) //enseño compra
   carrito += nuevoArticulo //introduzco el artículo en el carrito de la compra
   credito -= precio //disminuyo el crédito según el precio del artículo
} else {
   document.write("se te ha acabado el crédito") //informo que te falta dinero
   window.location = "carritodelacompra.html" //voy a la página del carrito
}


Este ejemplo es un poco más complejo, y también un poco ficticio. Lo que hago es comprobar si tengo crédito para realizar una supuesta compra. Para ello miro si el crédito es mayor o igual que el precio del artículo, si es así informo de la compra, introduzco el artículo en el carrito y resto el precio al crédito acumulado. Si el precio del artículo es superior al dinero disponible informo de la situación y mando al navegador a la página donde se muestra su carrito de la compra.

Expresiones condicionales
La expresión a evaluar se coloca siempre entre paréntesis y está compuesta por variables que se combinan entre si mediante operadores condicionales. Recordamos que los operadores condicionales relacionaban dos variables y devolvían siempre un resultado boleano. Por ejemplo un operador condicional es el operador "es igual" (==), que devuelve true en caso de que los dos operandos sean iguales o false en caso de que sean distintos.

Código: javascript
if (edad > 18)
   document.write("puedes ver esta página para adultos")


En este ejemplo utilizamos en operador condicional "es mayor" (>). En este caso, devuelve true si la variable edad es mayor que 18, con lo que se ejecutaría la línea siguiente que nos informa de que se puede ver el contenido para adultos.

Las expresiones condicionales se pueden combinar con las expresiones lógicas para crear expresiones más complejas. Recordamos que las expresiones lógicas son las que tienen como operandos a los boleanos y que devuelvan otro valor boleano. Son los operadores negación lógica, Y lógico y O lógico.

Código: javascript
if (bateria < 0.5 && redElectrica == 0)
   document.write("tu ordenador portatil se va a apagar en segundos")


Lo que hacemos es comprobar si la batería de nuestro supuesto ordenador es menor que 0.5 (está casi acabada) y también comprobamos si el ordenador no tiene red eléctrica (está desenchufado). Luego, el operador lógico los relaciona con un Y, de modo que si está casi sin batería Y sin red eléctrica, informo que el ordenador se va a apagar.

Nota: La lista de operadores que se pueden utilizar con las estructuras IF se pueden ver en el capítulo de operadores condicionales y operadores lógicos.

En el siguiente artículo seguiremos explicando usos avanzados de la estructura de control if en Javascript, como la anidación de estructuras if. Así mismo, recomendamos ver también el Videotutorial de Javascript, en el vídeo donde tratamos la estructura IF.

Enero 25, 2013, 06:50:44 PM #22 Ultima modificación: Mayo 11, 2014, 07:31:34 PM por Destructor.cs
Estructura IF (parte II)

Vemos más cosas sobre la estructura IF: la anidación de IFs y el operador ?, un IF sencillo.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
La estructura if es de las más utilizadas en lenguajes de programación, para tomar decisiones en función de la evaluación de una sentencia. En el artículo anterior del Manual de Javascript ya comenzamos a explicar la estructura if y ahora vamos a ver algunos usos un poquito más avanzados.

Sentencias IF anidadas
Para hacer estructuras condicionales más complejas podemos anidar sentencias IF, es decir, colocar estructuras IF dentro de otras estructuras IF. Con un solo IF podemos evaluar y realizar una acción u otra según dos posibilidades, pero si tenemos más posibilidades que evaluar debemos anidar IFs para crear el flujo de código necesario para decidir correctamente.

Por ejemplo, si deseo comprobar si un número es mayor menor o igual que otro, tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dos números son iguales, si lo son, ya he resuelto el problema, pero si no son iguales todavía tendré que ver cuál de los dos es mayor. Veamos este ejemplo en código Javascript.

Código: javascript
var numero1=23
var numero2=63
if (numero1 == numero2){
   document.write("Los dos números son iguales")
}else{
   if (numero1 > numero2) {
      document.write("El primer número es mayor que el segundo")
   }else{
      document.write("El primer número es menor que el segundo")
   }
}


El flujo del programa es como comentábamos antes, primero se evalúa si los dos números son iguales. En caso positivo se muestra un mensaje informando de ello. En caso contrario ya sabemos que son distintos, pero aun debemos averiguar cuál de los dos es mayor. Para eso se hace otra comparación para saber si el primero es mayor que el segundo. Si esta comparación da resultados positivos mostramos un mensaje diciendo que el primero es mayor que el segundo, en caso contrario indicaremos que el primero es menor que el segundo.

Volvemos a remarcar que las llaves son en este caso opcionales, pues sólo se ejecuta una sentencia para cada caso. Además, los saltos de línea y los sangrados también opcionales en todo caso y nos sirven sólo para ver el código de una manera más ordenada. Mantener el código bien estructurado y escrito de una manera comprensible es muy importante, ya que nos hará la vida más agradable a la hora de programar y más adelante cuando tengamos que revisar los programas.
Nota: En este manual utilizaré una notación como la que has podido ver en las líneas anteriores. Además mantendré esa notación en todo momento. Esto sin lugar a dudas hará que los códigos con ejemplos sean comprensibles más rápidamente, si no lo hiciéramos así sería un verdadero incordio leerlos. Esta misma receta es aplicable a los códigos que has de crear tú y el principal beneficiado serás tú mismo y los compañeros que lleguen a leer tu código.

Operador IF

Hay un operador que no hemos visto todavía y es una forma más esquemática de realizar algunos IF sencillos. Proviene del lenguaje C, donde se escriben muy pocas líneas de código y donde cuanto menos escribamos más elegantes seremos. Este operador es un claro ejemplo de ahorro de líneas y caracteres al escribir los scripts. Lo veremos rápidamente, pues la única razón por la que lo incluyo es para que sepas que existe y si lo encuentras en alguna ocasión por ahí sepas identificarlo y cómo funciona.

Un ejemplo de uso del operador IF se puede ver a continuación.

Código: javascript
Variable = (condición) ? valor1 : valor2


Este ejemplo no sólo realiza una comparación de valores, además asigna un valor a una variable. Lo que hace es evaluar la condición (colocada entre paréntesis) y si es positiva asigna el valor1 a la variable y en caso contrario le asigna el valor2. Veamos un ejemplo:

Código: javascript
momento = (hora_actual < 12) ? "Antes del mediodía" : "Después del mediodía"


Este ejemplo mira si la hora actual es menor que 12. Si es así, es que ahora es antes del mediodía, así que asigna "Antes del mediodía" a la variable momento. Si la hora es mayor o igual a 12 es que ya es después de mediodía, con lo que se asigna el texto "Después del mediodía" a la variable momento.

En el siguiente artículo pasaremos a trabajar con una nueva estructura de control, también utilizada para toma de decisiones, llamada switch.

Enero 25, 2013, 06:51:42 PM #23 Ultima modificación: Mayo 11, 2014, 07:32:16 PM por Destructor.cs
Estructura SWITCH de Javascript

La estructura de control switch de Javascript es utilizada para tomar decisiones en función de distintos estados o valores de una variable.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Las estructuras de control son la manera con la que se puede dominar el flujo de los programas, para hacer cosas distintas en función de los estados de las variables. En el Manual de Javascript ya empezamos a ver las estructuras de control y ahora le ha tocado el turno a SWITCH, una estructura un poco más compleja que permite hacer múltiples operaciones dependiendo del estado de una variable.

En este artículo veremos que switch nos sirve para tomar decisiones en función de distintos estados de las variables. Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.

La estructura SWITCH se incorporó a partir de la versión 1.2 de Javascript (Netscape 4 e Internet Explorer 4). Su sintaxis es la siguiente.

Código: javascript
switch (expresión) {
    case valor1:
       Sentencias a ejecutar si la expresión tiene como valor a valor1
       break
    case valor2:
       Sentencias a ejecutar si la expresión tiene como valor a valor2
       break
    case valor3:
       Sentencias a ejecutar si la expresión tiene como valor a valor3
       break
    default:
       Sentencias a ejecutar si el valor no es ninguno de los anteriores
}


La expresión se evalúa, si vale valor1 se ejecutan las sentencias relacionadas con ese caso. Si la expresión vale valor2 se ejecutan las instrucciones relacionadas con ese valor y así sucesivamente, por tantas opciones como deseemos. Finalmente, para todos los casos no contemplados anteriormente se ejecuta el caso por defecto.

La palabra break es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un valor se ejecutarán todas las sentencias relacionadas con este y todas las siguientes. Es decir, si en nuestro esquema anterior no hubiese ningún break y la expresión valiese valor1, se ejecutarían las sentencias relacionadas con valor1 y también las relacionadas con valor2, valor3 y default.

También es opcional la opción default u opción por defecto.

Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar que día de la semana es. Si el día es 1 (lunes) sacar un mensaje indicándolo, si el día es 2 (martes) debemos sacar un mensaje distinto y así sucesivamente para cada día de la semana, menos en el 6 (sábado) y 7 (domingo) que queremos mostrar el mensaje "es fin de semana". Para días mayores que 7 indicaremos que ese día no existe.

Código: javascript
switch (dia_de_la_semana) {
    case 1:
       document.write("Es Lunes")
       break
    case 2:
       document.write("Es Martes")
       break
    case 3:
       document.write("Es Miércoles")
       break
    case 4:
       document.write("Es Jueves")
       break
    case 5:
       document.write("Es viernes")
       break
    case 6:
    case 7:
       document.write("Es fin de semana")
       break
    default:
       document.write("Ese día no existe")
}


El ejemplo es relativamente sencillo, solamente puede tener una pequeña dificultad, consistente en interpretar lo que pasa en el caso 6 y 7, que habíamos dicho que teníamos que mostrar el mismo mensaje. En el caso 6 en realidad no indicamos ninguna instrucción, pero como tampoco colocamos un break se ejecutará la sentencia o sentencias del caso siguiente, que corresponden con la sentencia indicada en el caso 7 que es el mensaje que informa que es fin de semana. Si el caso es 7 simplemente se indica que es fin de semana, tal como se pretendía.

Nota: Además contamos con un videotutorial sobre el SWITCH en Javascript que os puede ser de mucha ayuda para entenderlo todo mucho mejor.

En el siguiente artículo comenzaremos a explorar las estructuras de control para hacer bucles o repeticiones en Javascript, comenzando por el bucle for.

Enero 25, 2013, 06:52:04 PM #24 Ultima modificación: Mayo 11, 2014, 07:33:31 PM por Destructor.cs
Bucle FOR

Descripción y ejemplos de funcionamiento del bucle FOR.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Comenzamos con este artículo del Manual de Javascript a explorar las estructuras de control para producir bucles o repeticiones, comenzando por el bucle for, no por ser el más simple, pero sí el más utilizado en la programación.

El bucle FOR se utiliza para repetir una o más instrucciones un determinado número de veces. De entre todos los bucles, el FOR se suele utilizar cuando sabemos seguro el número de veces que queremos que se ejecute. La sintaxis del bucle for se muestra a continuación.

Código: javascript
for (inicialización; condición; actualización) {
    //sentencias a ejecutar en cada iteración
}


El bucle FOR tiene tres partes incluidas entre los paréntesis, que nos sirven para definir cómo deseamos que se realicen las repeticiones. La primera parte es la inicialización, que se ejecuta solamente al comenzar la primera iteración del bucle. En esta parte se suele colocar la variable que utilizaremos para llevar la cuenta de las veces que se ejecuta el bucle.

La segunda parte es la condición, que se evaluará cada vez que comience una iteración del bucle. Contiene una expresión para decidir cuándo se ha de detener el bucle, o mejor dicho, la condición que se debe cumplir para que continúe la ejecución del bucle.

Por último tenemos la actualización, que sirve para indicar los cambios que queramos ejecutar en las variables cada vez que termina la iteración del bucle, antes de comprobar si se debe seguir ejecutando.

Después del for se colocan las sentencias que queremos que se ejecuten en cada iteración, acotadas entre llaves.

Un ejemplo de utilización de este bucle lo podemos ver a continuación, donde se imprimirán los números del 0 al 10.

Código: javascript
var i
for (i=0;i<=10;i++) {
    document.write(i)
    document.write("<br>")
}


En este caso se inicializa la variable i a 0. Como condición para realizar una iteración, se tiene que cumplir que la variable i sea menor o igual que 10. Como actualización se incrementará en 1 la variable i.

Como se puede comprobar, este bucle es muy potente, ya que en una sola línea podemos indicar muchas cosas distintas y muy variadas, lo que permite una rápida configuración del bucle y una versatilidad enorme.

Por ejemplo si queremos escribir los número del 1 al 1.000 de dos en dos se escribirá el siguiente bucle.

Código: javascript
for (i=1;i<=1000;i+=2)
    document.write(i)


Si nos fijamos, en cada iteración actualizamos el valor de i incrementándolo en 2 unidades.

Nota:
Otro detalle, no utilizamos las llaves englobando las instrucciones del bucle FOR porque sólo tiene una sentencia y en este caso no es obligado, tal como pasaba con las instrucciones del IF.

Si queremos contar descendentemente del 343 al 10 utilizaríamos este bucle.

Código: javascript
for (i=343;i>=10;i--)
    document.write(i)


En este caso decrementamos en una unidad la variable i en cada iteración, comenzando en el valor 343 y siempre que la variable tenga un valor mayor o igual que 10.

Ejercicio de ejemplo del bucle for
Vamos a hacer una pausa para asimilar el bucle for con un ejercicio que no encierra ninguna dificultad si hemos entendido el funcionamiento del bucle.

Se trata de hacer un bucle que escriba en una página web los encabezamientos desde <H1> hasta <H6> con un texto que ponga "Encabezado de nivel x".

Lo que deseamos escribir en una página web mediante Javascript es lo siguiente:

Código: html5
<H1>Encabezado de nivel 1</H1>
<H2>Encabezado de nivel 2</H2>
<H3>Encabezado de nivel 3</H3>
<H4>Encabezado de nivel 4</H4>
<H5>Encabezado de nivel 5</H5>
<H6>Encabezado de nivel 6</H6>


Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada iteración escribiremos el encabezado que toca.

Código: javascript
for (i=1;i<=6;i++) {
    document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")
}


Este script se puede ver en funcionamiento aquí.

Ahora que ya conocemos el bucle for, estamos en condiciones de aprender a manejar otras estructuras de control para realizar repeticiones, como los bucles while y do...while.

Enero 25, 2013, 06:52:26 PM #25 Ultima modificación: Mayo 11, 2014, 07:34:33 PM por Destructor.cs
Bucles WHILE y DO WHILE

Descripción y diferentes usos de los dos tipos de bucles WHILE que se encuentran disponibles en Javascript, con algunos ejemplos prácticos.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Estamos tratando acerca de las distintas estructuras de control que existen en el lenguaje Javascript y en concreto viendo los distintos tipos de bucles que podemos implementar en este lenguaje de programación. En artículos anteriores del Manual de Javascript vimos ya el primero de los bucles que debemos conocer, el bucle for y ahora vamos a tratar sobre los otros dos tipos de estructuras de control para hacer repeticiones. Así pues, veamos ahora los dos tipos de bucles WHILE que podemos utilizar en Javascript y los usos de cada uno.
Bucle WHILE
Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición. Se más sencillo de comprender que el bucle FOR, pues no incorpora en la misma línea la inicialización de las variables su condición para seguir ejecutándose y su actualización. Sólo se indica, como veremos a continuación, la condición que se tiene que cumplir para que se realice una iteración.

Código: javascript
while (condición){
    //sentencias a ejecutar
}


Un ejemplo de código donde se utiliza este bucle se puede ver a continuación.

Código: javascript
var color = ""
while (color != "rojo"){
    color = prompt("dame un color (escribe rojo para salir)","")
}


Este es un ejemplo de lo más sencillo que se puede hacer con un bucle while. Lo que hace es pedir que el usuario introduzca un color y lo hace repetidas veces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero tenemos que inicializar la variable que vamos utilizar en la condición de iteración del bucle. Con la variable inicializada podemos escribir el bucle, que comprobará para ejecutarse que la variable color sea distinto de "rojo". En cada iteración del bucle se pide un nuevo color al usuario para actualizar la variable color y se termina la iteración, con lo que retornamos al principio del bucle, donde tenemos que volver a evaluar si lo que hay en la variable color es "rojo" y así sucesivamente mientras que no se haya introducido como color el texto "rojo".

Nota: Hemos utilizado en este ejemplo la función prompt de Javascript, que no hemos visto todavía en este manual. Esta función sirve para que mostrar una caja de diálogo donde el usuario debe escribir un texto. Esta función pertenece al objeto window de Javascript y la comentamos en el artículo Métodos de window en Javascript.

Bucle DO...WHILE
El bucle do...while es la última de las estructuras para implementar repeticiones de las que dispone en Javascript y es una variación del bucle while visto anteriormente. Se utiliza generalmente cuando no sabemos cuantas veces se habrá de ejecutar el bucle, igual que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se ejecutará una vez.

Este tipo de bucle se introdujo en Javascript 1.2, por lo que no todos los navegadores los soportan, sólo los de versión 4 o superior. En cualquiuer caso, cualquier código que quieras escribir con DO...WHILE se puede escribir también utilizando un bucle WHILE, con lo que en navegadores antiguos deberás traducir tu bucle DO...WHILE por un bucle WHILE.

La sintaxis es la siguiente.

Código: javascript
do {
    //sentencias del bucle
} while (condición)


El bucle se ejecuta siempre una vez y al final se evalúa la condición para decir si se ejecuta otra vez el bucle o se termina su ejecución.

Veamos el ejemplo que escribimos para un bucle WHILE en este otro tipo de bucle.

Código: javascript
var color
do {
    color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")


Este ejemplo funciona exactamente igual que el anterior, excepto que no tuvimos que inicializar la variable color antes de introducirnos en el bucle. Pide un color mientras que el color introducido es distinto que "rojo".

Ejemplo de uso de los bucles while
Vamos a ver a continuación un ejemplo más práctico sobre cómo trabajar con un bucle WHILE. Como resulta muy difícil hacer ejemplos prácticos con lo poco que sabemos sobre Javascript, vamos a adelantar una instrucción que aun no conocemos.

En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremos sumando a esa variable un número aleatorio del 1 al 100 hasta que sumemos 1.000 o más, imprimiendo el valor de la variable suma después de cada operación. Será necesario utilizar el bucle WHILE porque no sabemos exactamente el número de iteraciones que tendremos que realizar (dependerá de los valores aleatorios que se vayan obteniendo).

Código: javascript
var suma = 0
while (suma < 1000){
    suma += parseInt(Math.random() * 100)
    document.write (suma + "<br>")
}


Suponemos que por lo que respecta al bucle WHILE no habrá problemas, pero donde si que puede haberlos es en la sentencia utilizada para tomar un número aleatorio. Sin embargo, no es necesario explicar aquí la sentencia porque lo tenemos planeado hacer más adelante. De todos modos, si lo deseas, puedes ver este artículo que habla sobre números aleatorios en Javascript.

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

Con esto ya hemos conocido todos los tipos de bucles que existen en Javascript, no obstante aun vamos a dedicar un artículo para explicar las sentencias break y continue que nos sirven para alterar el funcionamiento normal de los bucles en dos sentidos.

Enero 25, 2013, 06:52:50 PM #26 Ultima modificación: Mayo 11, 2014, 07:35:16 PM por Destructor.cs
Break y continue

Dos instrucciones que aumentan el control sobre los bucles en Javascript. Sirven para parar y continuar con la siguiente iteración del bucle respectivamente.


Por Miguel Angel Alvarez
Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.

Javascript tiene diferentes estructuras de control para implementar bucles, como FOR, WHILE y DO...WHILE, que ya hemos podido explicar en capítulos anteriores del Manual de Javascript. Como hemos podido comprobar, con estos bucles podemos abarcar gran cantidad de necesidades, pero quizás con el tiempo encuentres que te faltan algunas posibilidades de control de las repeticiones de los bucles.

Imagina por ejemplo que estas haciendo un bucle muy largo para encontrar algo en cientos o miles de sitios. Pero ponte en el caso que durante las primeras iteraciones encuentres ese valor que buscabas. Entonces no tendría sentido continuar con el resto del bucle para buscar ese elemento, pues ya lo habías encontrado. En estas situaciones nos conviene saber para el bucle cancelar el resto de iteraciones. Obviamente, ésto es solo un ejemplo de cómo podríamos vernos en la necesidad de controlar un poco más el bucle. En la vida real como programador encontrarás muchas otras ocasiones en las que te interesará hacer esto u otras cosas con ellos.

Así pues, existen dos instrucciones que se pueden usar en de las distintas estructuras de control y principalmente en los bucles, que te servirán para controlar dos tipos de situaciones. Son las instrucciones break y continue.:

    break: Significa detener la ejecución de un bucle y salirse de él.
    continue: Sirve para detener la iteración actual y volver al principio del bucle para realizar otra iteración, si corresponde.

Break
Se detiene un bucle utilizando la palabra break. Detener un bucle significa salirse de él y dejarlo todo como está para continuar con el flujo del programa inmediatamente después del bucle.

Código: javascript
for (i=0;i<10;i++){
    document.write (i)
    escribe = prompt("dime si continuo preguntando...", "si")
    if (escribe == "no")
       break
}


Este ejemplo escribe los números del 0 al 9 y en cada iteración del bucle pregunta al usuario si desea continuar. Si el usuario dice cualquier cosa continua, excepto cuando dice "no", situación en la cual se sale del bucle y deja la cuenta por donde se había quedado.

Continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las líneas que haya por debajo de la palabra continue.

Código: javascript
var i=0
while (i<7){
    incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
    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.

Código: javascript
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.

Enero 25, 2013, 06:53:08 PM #27 Ultima modificación: Mayo 11, 2014, 07:36:22 PM por Destructor.cs
Bucles anidados en Javascript

Explicamos lo que es un bucle anidado, cómo funcionan y para qué sirven. Vemos algunos ejemplos.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
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 anteriores. Si en vuestra experiencia como programadores los habéis anidado un bucle todavía, tener certeza 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:

Código: javascript
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:

Código: text
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.

Código: text
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9


Y luego estos.

Código: text
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...

Código: javascript
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 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.

Enero 25, 2013, 06:53:38 PM #28 Ultima modificación: Mayo 11, 2014, 07:37:35 PM por Destructor.cs
Funciones en Javascript

Comenzamos con las funciones en Javascript. Definimos el concepto de función y aprendemos a crearlas y a llamarlas.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
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 ejemplo, cuando hacíamos un document.write() en realidad estábamos llamando a la función write() 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.

Código: javascript
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.

Código: javascript
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.

Código: javascript
escribirBienvenida()


Luego veremos que existen muchas cosas adicionales que debemos conocer de las funciones, como el paso de parámetros o los valores de retorno. Pero antes vamos a explicar dónde debemos colocar las funciones Javascript.

Enero 25, 2013, 06:54:08 PM #29 Ultima modificación: Mayo 11, 2014, 07:38:28 PM por Destructor.cs
Dónde colocamos las funciones

Vemos la manera de insertar las funciones Javascript de cliente dentro de las páginas web.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
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>.

Código: javascript
<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.

Código: html5
<HTML>
<HEAD>
   <TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
    //hago algo...
    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.

Código: javascript
<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.

Enero 25, 2013, 06:54:30 PM #30 Ultima modificación: Mayo 11, 2014, 07:40:08 PM por Destructor.cs
Parámetros de las funciones

Vemos lo que son los parámetros en las funciones. Vemos como definir funciones que reciben parámetros en el lenguaje Javascript y como hacer llamadas a funciones pasando parámetros.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
En el Manual de Javascript hemos hablado anteriormente sobre funciones. En concreto este es el tercer artículo que abordamos sobre el tema.

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 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.

Código: javascript
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:

Código: javascript
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 segundo el color del texto.

Código: javascript
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.

Código: javascript
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.

Código: javascript
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 aprender a hacer funciones que devuelven valores.

Enero 25, 2013, 06:54:54 PM #31 Ultima modificación: Mayo 11, 2014, 07:41:54 PM por Destructor.cs
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.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta. No reproducir. Copyright.
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.

Código: javascript
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í 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.

Código: javascript
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.

Código: javascript
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.

Nota: Incluso, si lo pensamos, nos podremos dar cuenta que los parámetros son como variables que se declaran en la cabecera de la función y que se inicializan al llamar a la función. Los parámetros también son locales a la función y tendrán validez sólo cuando ésta se está ejecutando.

Podría darse el caso de que podemos declarar variables en funciones que tengan el mismo nombre que una variable global a la página. Entonces, dentro de la función, la variable que tendrá validez es la variable local y fuera de la función tendrá validez la variable global a la página.

En cambio, si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una variable global a la página, de modo que si no está creada la variable la crea, pero siempre global a la página en lugar de local a la función.

Veamos el siguiente código.
Código: javascript

function variables_glogales_y_locales(){
   var variableLocal = 23
   variableGlobal = "qwerty"
}


En este caso variableLocal es una variable que se ha declarado en la función, por lo que será local a la función y sólo tendrá validez durante su ejecución. Por otra parte variableGlobal no se ha llegado a declarar (porque antes de usarla no se ha utilizado la palabra var para declararla). En este caso la variable variableGlobal es global a toda la página y seguirá existiendo aunque la función finalice su ejecución. Además, si antes de llamar a la función existiese la variable variableGlobal, como resultado de la ejecución de esta función, se machacaría un hipotético valor de esa variable y se sustituiría por "qwerty".

Nota: Podemos encontrar más información sobre ámbito de variables en un artículo anterior.

Con esto hemos terminado el tema de las funciones, así que en adelante nos dedicaremos a otros asuntos también interesantes, como son los Arrays en Javascript.

Enero 25, 2013, 06:55:26 PM #32 Ultima modificación: Mayo 11, 2014, 07:42:51 PM por Destructor.cs
Arrays en Javascript

Vemos que son los arrays en Javascript, para qué sirven y cómo utilizarlos. Veremos diversas formas de crearlos, así como definir y acceder a sus valores.
Por Miguel Angel Alvarez

Atención:
Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Pasamos a un nuevo tema en el Manual de Javascript, en el que vamos a conocer nuestra primera estructura de datos.

En los lenguajes de programación existen estructuras de datos especiales que nos sirven para guardar información más compleja que simples variables. Una estructura típica en todos los lenguajes es el Array, que es como una variable donde podemos introducir varios valores, en lugar de solamente uno como ocurre con la variables normales.

Los arrays nos permiten guardar varias variables y acceder a ellas de manera independiente, es como tener una variable con distintos compartimentos donde podemos introducir datos distintos. Para ello utilizamos un índice que nos permite especificar el compartimiento o posición a la que nos estamos refiriendo.

Nota: Los arrays se introdujeron en versiones Javascript 1.1 o superiores, es decir, solo los podemos utilizar a partir de los navegadores 3.0. Para navegadores antiguos se puede simular el array utilizando sintaxis de programación orientada a objetos, pero la verdad es que actualmente esta limitación no debe preocuparnos. Además, dada la complejidad de la tarea de simular un array por medio de objetos, por lo menos en el momento en que nos encontramos y las pocas ocasiones en que lo necesitaremos, opinamos que es mejor olvidarnos de ese asunto y trabajar simplemente con los arrays normalmente. Así que en este artículo y los siguientes vamos a ver cómo utilizar el auténtico array de Javascript.

Creación de Arrays javascript
El primer paso para utilizar un array es crearlo. Para ello utilizamos un objeto Javascript ya implementado en el navegador. Veremos en adelante un tema para explicar lo que es la orientación a objetos, aunque no será necesario para poder entender el uso de los arrays. Esta es la sentencia para crear un objeto array:

Código: javascript
var miArray = new Array()


Esto crea un array en la página que esta ejecutándose. El array se crea sin ningún contenido, es decir, no tendrá ninguna casilla o compartimiento creado. También podemos crear el array Javascript especificando el número de compartimentos que va a tener.

Código: javascript
var miArray = new Array(10)


En este caso indicamos que el array va a tener 10 posiciones, es decir, 10 casillas donde guardar datos.

Es importante que nos fijemos que la palabra Array en código Javascript se escribe con la primera letra en mayúscula. Como en Javascript las mayúsculas y minúsculas si que importan, si lo escribimos en minúscula no funcionará.

Tanto se indique o no el número de casillas del array javascript, podemos introducir en el array cualquier dato. Si la casilla está creada se introduce simplemente y si la casilla no estaba creada se crea y luego se introduce el dato, con lo que el resultado final es el mismo. Esta creación de casillas es dinámica y se produce al mismo tiempo que los scripts se ejecutan. Veamos a continuación cómo introducir valores en nuestros arrays.

Código: javascript
miArray[0] = 290
miArray[1] = 97
miArray[2] = 127


Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso introducimos 290 en la posición 0, 97 en la posición 1 y 127 en la 2.

Los arrays en Javascript empiezan siempre en la posición 0, así que un array que tenga por ejemplo 10 posiciones, tendrá casillas de la 0 a la 9. Para recoger datos de un array lo hacemos igual: poniendo entre corchetes el índice de la posición a la que queremos acceder. Veamos cómo se imprimiría en la pantalla el contenido de un array.

Código: javascript
var miArray = new Array(3)

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

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


Hemos creado un array con tres posiciones, luego hemos introducido un valor en cada una de las posiciones del array y finalmente las hemos impreso. En general, el recorrido por arrays para imprimir sus posiciones, o cualquier otra cosa, se hace utilizando bucles. En este caso utilizamos un bucle FOR que va desde el 0 hasta el 2.

Podemos ver el ejemplo en marcha en otra página.
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.

Código: javascript
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.

Código: javascript
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:

Código: javascript
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.

Enero 25, 2013, 06:55:58 PM #33 Ultima modificación: Mayo 11, 2014, 07:43:42 PM por Destructor.cs
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.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
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.

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.

Código: javascript
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.

Código: javascript
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.

Código: javascript
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>")
}


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:

Código: text
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.

Enero 25, 2013, 06:56:20 PM #34 Ultima modificación: Mayo 11, 2014, 07:44:33 PM por Destructor.cs
Arrays multidimensionales

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.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
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.

En Javascript no existe un auténtico objeto array-multidimensinal. Para utilizar estas estructuras podremos 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.

Código: javascript
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.

Código: javascript
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.

Código: javascript
document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>");
for (i=0;i<temperaturas_cuidades.length;i++){
    document.write("<tr>")
    document.write("<td><b>Ciudad " + i + "</b></td>")
    for (j=0;j<temperaturas_cuidades[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.

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.

Código: javascript
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).

Ahora vamos a ver algo más complicado, se trata de declarar el array bidimensional que utilizamos antes para las temperaturas de las ciudades en los meses en una sola línea, introduciendo los valores a la vez.

Código: javascript
var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))


En el ejemplo introducimos en cada casilla del array otro array que tiene como valores las temperaturas de una ciudad en cada mes.

Javascript todavía tiene una manera más resumida que la que acabamos de ver, que explicamos en el primer artículo donde tratamos los arrays. Para ello simplemente escribimos entre corchetes los datos del array que estamos creando. Para acabar vamos a mostrar un ejemplo sobre cómo utilizar esta sintaxis para declarar arrays de más de una dimensión.

Código: javascript
var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien", "mal"], "acabo"], 2, 5];


En este ejemplo hemos creado un array muy poco uniforme, porque tiene casillas con contenido de simples enteros y otras con contenido de cadena y otras que son otros arrays. Podríamos acceder a algunas de sus casillas y mostrar sus valores de esta manera:

Código: javascript
alert (arrayMuchasDimensiones[0])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])


Con esto hemos llegado al fin de los artículos que tratan sobre arrays en Javascript y ahora podemos continuar con una pequeña pausa y consejos que vendrán bien para mejorar nuestra relación con este lenguaje de programación.

Pausa y consejos Javascript

Hacemos una pausa en el manual de Javascript para ofrecer una serie de consejos útiles.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Hasta aquí hemos visto la mayor parte de la sintaxis y forma de funcionar de el lenguaje Javascript. Ahora podemos escribir scripts simples que hagan uso de variables, funciones, arrays, estructuras de control y toda clase de operadores. Con todo esto conocemos el lenguaje, pero aun queda mucho camino por delante para dominar Javascript y saber hacer todos los efectos posibles en páginas web, que en definitiva es lo que interesa.

De todos modos, este manual nos lo hemos tomado con mucha calma, con intención de que las personas que no estén familiarizadas con el mundo de la programación puedan también tener acceso al lenguaje y aprendan las técnicas básicas que permitirán afrontar futuros retos en la programación. Esperamos entonces que la lectura del manual haya sido provechosa para los más inexpertos y que ahora puedan entender con facilidad las siguientes lecciones o ejemplos, ya que conocen las bases sobre las que están implementados.

Antes de acabar, vamos a dar una serie de consejos a seguir a la hora de programar nuestros scripts, que nos pueden ayudar a hacernos la vida más fácil. Algunos consejos son nuevos e importantes, otros se han señalado con anterioridad, pero sin duda viene bien recordar.

Distintos navegadores
Lo primero importante en señalar es que Javascript es un lenguaje muy dinámico y que ha sido implementado poco a poco, a medida que salían nuevos navegadores. Si pensamos en el Netscape 2, el primer navegador que incluía Javascript, y el Netscape 6 o Internet Explorer 6 nos daremos cuenta que han pasado un mundo de novedades entre ellos. Javascript ha cambiado por lo menos tanto como los navegadores y eso representa un problema para los programadores, porque tienen que estar al tanto de las distintas versiones y la manera de funcionar que tienen.

Actualizado: a día de hoy todavía las diferencias entre los navegadores antiguos y los nuevos es todavía más patente. Incluso, ahora que aparece el HTML 5, existen muchos otros usos donde Javascript tiene validez.

Las bases de javascript, sobre las que hemos hablado hasta ahora, no han cambiado prácticamente nada. Sólo en algunas ocasiones, que hemos señalado según las conocíamos -como los arrays por ejemplo-, el lenguaje ha evolucionado un poco. Sin embargo, a medida que nuevas tecnologías como el DHTML se desarrollaban, los navegadores han variado su manera de manejarlas.

Nuestro consejo es que esteis al tanto de las cosas que funcionan en unos u otros sistemas y que programéis para que vuestras páginas sean compatibles en el mayor número de navegadores. Para procurar esto último es muy aconsejable probar las páginas en varias plataformas distintas. También es muy útil dejar de lado los últimos avances, es decir, no ir a la última, sino ser un poco conservadores, para que las personas que han actualizado menos el browser puedan también visualizar los contenidos.
Consejos para hacer un código sencillo y fácil de mantener
Ahora vamos a dar una serie de consejos para que el código de nuestros scripts sea más claro y libre de errores. Muchos de ellos ya los hemos señalado y somos libres de aplicarlos o no, pero si lo hacemos nuestra tarea como programadores puede ser mucho más agradable, no sólo hoy, sino también el día que tengamos que revisar los scripts en su mantenimiento.

    Utiliza comentarios habitualmente para que lo que estás haciendo en los scripts pueda ser recordado por ti y cualquier persona que tenga que leerlos más adelante.
    Ten cuidado con el ámbito de las variables, recuerda que existen variables globales y locales, que incluso pueden tener los mismos nombres y conoce en cada momento la variable que tiene validez.
    Escribe un código con suficiente claridad, que se consigue con saltos de línea después de cada instrucción, un sangrado adecuado (poner márgenes a cada línea para indicar en qué bloque están incluidas), utilizar las llaves {} siempre, aunque no sean obligatorias y en general mantener siempre el mismo estilo a la hora de programar.
    Aplica un poco de consistencia al manejo de variables. Declara las variables con var. No cambies el tipo del dato que contiene (si era numérica no pongas luego texto, por ejemplo). Dales nombres comprensibles para saber en todo momento qué contienen. Incluso a la hora de darles nombre puedes aplicar una norma, que se trata de que indiquen en sus nombres el tipo de dato que contienen. Por ejemplo, las variables de texto pueden empezar por una s (de String), las variables numéricas pueden empezar por una n o las boleanas por una b.
    Prueba tus scripts cada poco a medida que los vas programando. Puedes escribir un trozo de código y probarlo antes de continuar para ver que todo funciona correctamente. Es más fácil encontrar los errores de código en bloques pequeños que en bloques grandes.

En el resto de esta primera parte del manual de Javascript vamos a ver un par de cosas también fundamentales en el trabajo del día a día con este lenguaje, como son la detección de errores. Además, os dejamos unas referencias importantes para continuar con el aprendizaje:

    Manual de Javascript II: la segunda parte de este manual abordará usos de Javascript para control de los elementos de las páginas web.
    Videotutorial de Javascript: estamos publicando una serie de videotutoriales de Javascript que te encantarán si quieres aprender por la práctica.
    Javascript a fondo: todo lo que tiene que ver con Javascript lo encontrarás en esta sección de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.

Enero 25, 2013, 06:57:46 PM #36 Ultima modificación: Mayo 11, 2014, 07:45:27 PM por Destructor.cs
Tratamiento de errores en javascript

Vamos a explicar los errores comunes que podemos cometer y cómo evitarlos y depurarlos. Además veremos una pequeña conclusión a la primera parte del manual.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Hemos terminado ya de explicar todo el contenido de la primera parte del manual de javascript, pero aun tenemos algunas cosas importantes que tratar. En concreto en este artículo vamos a explicar los errores comunes que podemos cometer y cómo evitarlos y depurarlos. Además veremos una pequeña conclusión a esta parte del manual.

Errores comunes en Javascript
Cuando ejecutamos los scripts pueden ocurrir dos tipos de errores de sintaxis o de ejecución, los vemos a continuación.

Errores de sintaxis ocurren por escribir de manera errónea las líneas de código, equivocarse a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis o cualquier cosa similar. Estos errores los indica javascript a medida que está cargando los scripts en memoria, lo que hace siempre antes de ejecutarlos, como se indicó en los primeros capítulos. Cuando el analizador sintáctico de javascript detecta un error de estos se presenta el mensaje de error.

Errores de ejecución ocurren cuando se están ejecutando los scripts. Por ejemplo pueden ocurrir cuando llamamos a una función que no ha sido definida. javascript no indica estos errores hasta que no se realiza la llamada a la función.

La manera que tiene javascript de mostrar un error puede variar de un navegador a otro. En versiones antiguas se mostraba una ventanita con el error y un botón de aceptar, tanto en Internet Explorer como en Netscape. En la actualidad los errores de javascript permanecen un poco más ocultos al usuario. Esto viene bien, porque si nuestras páginas tienen algún error en alguna plataforma no será muy molesto para el usuario que en muchas ocasiones ni se dará cuenta. Sin embargo para el programador puede ser un poco más molesto de revisar y se necesitará conocer la manera de que se muestren los errores para que puedan ser reparados.

En versiones de Internet Explorer mayores que la 4 se muestra el error en la barra de estado del navegador y se puede ver una descripción más grande del error si le damos un doble click al icono de alerta amarillo que aparece en la barra de estado. En Netscape aparece también un mensaje en la barra de estado que además nos indica que para mostrar más información debemos teclear "javascript:" en la barra de direcciones (donde escribimos las URL para acceder a las páginas). Con eso conseguimos que aparezca la Consola javascript, que nos muestra todos los errores que se encuentran en las páginas.

También podemos cometer fallos en la programación que hagan que los scripts no funcionen tal y como deseábamos y que javascript no detecta como errores y por lo tanto no muestra ningún mensaje de error.

Por dejarlo claro vamos a ver un ejemplo en el que nuestro programa puede no funcionar como deseamos sin que javascript ofrezca ningún mensaje de error. En este ejemplo trataríamos de sumar dos cifras pero si una de las variables es de tipo texto podríamos encontrarnos con un error.

Código: javascript
var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2


¿Cuánto vale la variable suma? Como muchos ya sabéis, la variable suma vale "2342" porque al intentar sumar una variable numérica y otra textual, se tratan a las dos como si fueran de tipo texto y por lo tanto, el operador + se aplica como una concatenación de cadenas de caracteres. Si no estamos al tanto de esta cuestión podríamos tener un error en nuestro script ya que el resultado no es el esperado y además el tipo de la variable suma no es numérico sino cadena de caracteres.
Evitar errores comunes
Vamos a ver ahora una lista de los errores típicos cometidos por inexpertos en la programación en general y en javascript en particular, y por no tan inexpertos.

Utilizar = en expresiones condicionales en lugar de == es un error difícil de detectar cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una asignación y no una comparación para ver si dos valores son iguales.

No conocerse la precedencia de operadores y no utilizar paréntesis para agrupar las operaciones que se desea realizar. En este caso nuestras operaciones pueden dar resultados no deseados.

Usar comillas dobles y simples erróneamente. Recuerda que se pueden utilizar comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas dobles se deben utilizar comillas simples y viceversa.

Olvidarse de cerrar una llave o cerrar una llave de más.

Colocar varias sentencias en la misma línea sin separarlas de punto y coma. Esto suele ocurrir en los manejadores de eventos, como onclick, que veremos más adelante.

Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas también son errores comunes. Recuerda que si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local.

Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posición 0.
Depurar errores javascript
Cualquier programa es susceptible de contener errores. javascript nos informará de muchos de los errores de la página: los que tienen relación con la sintaxis y los que tienen lugar en el momento de la ejecución de los scripts a causa de equivocarnos al escribir el nombre de una función o una variable. Sin embargo, no son los únicos errores que nos podemos encontrar, también están los errores que ocurren sin que javascript muestre el correspondiente mensaje de error, como vimos anteriormente, pero que hacen que los programas no funcionen como esperábamos.

Nota: Para aprender a utilizar las herramientas de detección de errores Javascript más populares, recomendamos especialmente ver el videotutorial sobre detectar errores Javascript en páginas web.

Para todo tipo de errores, unos más fáciles de detectar que otros, debemos utilizar alguna técnica de depuración que nos ayude a encontrarlos. Lenguajes de programación más potentes que el que tratamos ahora incluyen importantes herramientas de depuración, pero en javascript debemos contentarnos con una rudimentaria técnica. Se trata de utilizar una función predefinida, la función alert() que recibe entre paréntesis un texto y lo muestra en una pequeña ventana que tiene un botón de aceptar.

Con la función alert() podemos mostrar en cualquier momento el contenido de las variables que estamos utilizando en nuestros scripts. Para ello ponemos entre paréntesis la variable que deseamos ver su contenido. Cuando se muestra el contenido de la variable el navegador espera a que apretemos el botón de aceptar y cuando lo hacemos continúa con las siguientes instrucciones del script.

Este es un sencillo ejemplo sobre cómo se puede utilizar la función alert() para mostrar el contenido de las variables.

Código: javascript
var n_actual = 0
var suma = 0
while (suma<300){
    n_actual ++
    suma += suma + n_actual
    alert("n_actual vale " + n_actual + " y suma vale " + suma)
}


Con la función alert() se muestra el contenido de las dos variables que utilizamos en el script. Algo similar a esto es lo que tendremos que hacer para mostrar el contenido de las variables y saber cómo están funcionando nuestros scripts, si todo va bien o hay algún error.

Conclusión
Hasta aquí hemos conocido la sintaxis javascript en profundidad. Aunque aun nos quedan cosas importantes de sintaxis, la visión que has podido tener del lenguaje será suficiente para enfrentarte a los problemas más fundamentales. En adelante presentaremos otros reportajes para aprender a utilizar los recursos con los que contamos a la hora de hacer efectos en páginas web.

Veremos la jerarquía de objetos del navegador, cómo construir nuestros propios objetos, las funciones predefinidas de javascript, características del HTML Dinámico, trabajo con formularios y otras cosas importantes para dominar todas las posibilidades del lenguaje.

Todo ello en nuestro manual de Javascript II y en el Taller de Javascript

Enero 25, 2013, 06:58:15 PM #37 Ultima modificación: Mayo 11, 2014, 07:46:07 PM por Destructor.cs
Consejos para escribir código Javascript

En este artículo puedes encontrar varios consejos bastante interesantes a la hora de programar código Javascript.
Por Manu Gutierrez

Atención: Contenido exclusivo de No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.
Si estas dando tus primeros pasos en Javacript y estas empezando ya a ser sucio y desordenado... No tienes excusa da un giro para escribir el código ordenado y todo será más sencillo.

Los foros estan llenos de peticiones de información sobre Ajax, DOM y como se usan algunas librerías o efectos. Hay una extraordinaria cantidad de información, scripts, librerías que estan siendo desarrollados, blogs y nuevos sitios especializados en esta temática, sólo necesitas un poco de tiempo y echarle un vistazo... es muy fácil los mejores los encuentras en No tienes permitido ver los links. Registrarse o Entrar a mi cuenta o en No tienes permitido ver los links. Registrarse o Entrar a mi cuenta, se acabaron aquellos días en el que Javascript y el DHTML se convirtieron en persona non grata como habilidad principal en tu CV.

La gran mayoría de código Javascript es hoy en dia mucho más limpio que en la "era" DHTML.

Ahora es un buen momento para convertirte en un entusiasta de Javascript. Aunque algunos defectos que ocurrieron tiempo atras se repiten sin embargo.

Aquí os dejo una series de consejos que os hará más sencillo mantener tu código Javascript ordenado, algunos consejos son demasiado obvios pero todos sabemos que el hombre es el único animal que...
Conserva la sintaxis y estructura de tu código limpia y ordenada
Esto significa que guardes por ejemplo un límite de longitud de línea (80 caracteres) y que programes funciones razonablemente pequeñas. Un fallo es pensar que en una función larga lo podemos hacer todo.

Tener un tamaño razonable para tus funciones significa que las podrás reutilizar cuando amplies el código, tampoco seas extremista y hagas funciones de una o dos líneas esto puede llegar a ser más confuso que usar una única función.

Este es un ejemplo que muestra cual es la justa medida en cuanto al tamaño de las funciones y la división de las tareas:

Código: javascript
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = document.createElement('a');
itemlink.setAttribute('href', '#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick = function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
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:


Código: javascript
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()).

Código: 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.

Código: javascript
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:

Código: javascript
var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
'loadingMessage' : 'Loading your data...',
'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.