lunes, 16 de diciembre de 2013

Control de la ejecución de código en JavaScript

Javascript proporciona un conjunto de instrucciones que permiten controlar si un bloque de código debe ejecutarse o no, o posibilitar que ese bloque de instrucciones se ejecute una o más veces.
Este tipo de instrucciones se divide en dos grupos principales que se conocen como sentencias condicionales y sentencias repetitivas (ciclos, lazos o bucles son nombres comunes utilizados en otros lenguajes de programación).


Sentencias condicionales

Básicamente, nos podemos encontrar las siguientes construcciones que involucran sentencias condicionales.
  • Sentencia if.
  • Sentencia if-else.
  • Sentencia if-else if-else.
  • Evaluación de condiciones en cortocircuito.
  • Sentencias if anidadas.
  • Sentencias switch.


Sentenias if


La instrucción if es la instrucción básica que controla la toma de decisiones. La sintaxis de una instrucción es es la siguiente:
if(expresion)[{]
    //Bloque de instrucciones;
[}]

El funcionamiento de una instrucción if es simple. Se evalúa la expresión dentro de los paréntesis del if y si la evaluación resulta verdadera (true) se ejecuta el bloque de instrucciones delimitado por las llaves, pero si resulta falsa (false) el bloque de instrucciones se ignora y se continúa con las instrucciones posteriores al bloque if.

Debe notar que en la sintaxis se incluyen unos corchetes, que no son parte de la sentencia if, quieren indicar que las llaves que encierra son opcionales si el bloque de instrucciones está compuesto por una sola instrucción. Cuando exista más de una instrucción, las llaves serán obligadas. Por conveniencia y para evitar equivocarse, resulta más fácil recordar colocar las llaves siempre, sea que el bloque de instrucciones posea una o más instrucciones, incluso, cuando no exista ninguna instrucción. Al hacerlo, nunca obtendremos un error de sintaxis.

Veamos un ejemplo del uso de la sentencia if:
var precioTotal = prompt("Introduzca el precio total: ", 10.00);
var iva = prompt("Introduzca el porcentaje de IVA: ", 0.13);
var retensionIVA;
       
if(iva >= 0){
    retensionIVA = precioTotal * iva;
    document.writeln("La retensión de IVA es: " + retensionIVA + "<br />\n");
    document.writeln("El valor total a pagar es: " + (parseFloat(precioTotal) + parseFloat(retensionIVA)) + "<br />\n");
}



Sentencia if-else

Para poder realizar una acción cuando el resultado de la evaluación de la condición sea falso, se dispone de una instrucción if con una cláusula else. La sintaxis de esta instrucción condicional es:
if(expresion)[{]
    //Bloque de instrucciones if;
[}]
else[{]
    //Bloque de instrucciones else;[}]

Un ejemplo de cómo utilizar la sentencia if-else se muestra a continuación:
var resp = prompt("¿Cuál es tu edad?", "");
if(resp){
    document.writeln("Tu edad es: ", resp);
}
else{
    alert("No has contestado...");
}


En esta forma de la instrucción, según se ilustra en el ejemplo, se evalúa el valor de resp dentro del if y si resulta ser un valor falso o equivalente (cero, cadena vacía o nulo) entonces se ejecuta la instrucción dentro del if. De lo contrario (evaluación falsa), se ejecuta la instrucción delimitada por el bloque else.


Sentencias if-else if-else


Esta sentencia puede utilizarse como complemento de la sentencia if-else cuando se deseen evaluar múltiples condiciones, no solo una como ocurre con el if-else, en donde sólo se puede evaluar una condición única. Al usar else if podemos agregar nuevas condiciones en cada bloque else if como lo muestra la sintaxis a continuación:
if(condicion-if){
   //Bloque instrucciones if
}
else if(condicion-else-if1){
   //Bloque instrucciones else-if1
}
else if(condicion-else-if2){
   //Bloque instrucciones else-if2
}
else if(condicion-else-if3){
   //Bloque instrucciones else-if3
}
...
else if(condicion-else-ifN){
   //Bloque instrucciones else-ifN
}
else{
   //Bloque instrucciones else
}

Para mostrar cómo se puede utilizar esta construcción de programación con sentencias if dejamos el siguiente ejemplo. Puede nombrar el script rendimiento.js:
var notafinal;

//Solicitando nota final del curso
notafinal = parseFloat(prompt("¿Cuál es tu nota?",""));
if(notafinal >= 0 && notafinal < 2){
    document.write("<h4>Tu rendimiento escolar es realmente malo.</h4>");
}
else if(notafinal >= 2 && notafinal < 4){
    document.write("<h4>Tu rendimiento escolar es deficiente.</h4>");
}
else if(notafinal >= 4 && notafinal < 6){
    document.write("<h4>Tu rendimiento escolar es bueno</h4>");
}
else if(notafinal >= 6 && notafinal < 8){
    document.write("<h4>Tu rendimiento escolar es muy bueno.</h4>");
}
else if(notafinal >= 8 && notafinal < 10){
    document.write("<h4>Tu rendimiento escolar es excelente.</h4>");
}
else{
    document.write("<h4>La nota ingresada no es correcta. Inténtalo de nuevo recargando la página.</h4>");

}

Puede probar el ejemplo de JavaScript anterior como una página web como la siguiente:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Rendimiento escolar</title>
</head>
<body>
<header>
    <h1>Medida de tu rendimiento escolar</h1>
</header>
<section>
    <article>
   <script type="text/javascript" src="js/rendimiento.js"></script>
        <noscript>
            <p>Tu navegador tiene desactivado el soporte para JavaScript o es demasiado antiguo.</p>
            <p>Te sugerimos actualizarlo para poder utilizar este sitio web correctamente.</p>
        </noscript>
</article>
</section>
<footer>
    <p>Ejemplo de sentencias if-else if-else</p>
</footer>
</body>

</html>

Nombre el documento web rendimiento.html y carguelo en su navegador preferido.

Podrá observar el siguiente resultado con 5 notas ingresadas diferentes en cada ocasión:


Ejecución con nota muy buena:


Ejecución con nota no válida:



Evaluación de condiciones en cortocircuito

Se denomina como evaluación en "cortocircuito" a la propiedad que tienen los operadores lógicos Y (And) y el O (Or) al involucrar ciertas expresiones en donde se puede obtener el resultado de la expresión completa, sin necesidad de evaluar los dos, o más, componentes de la misma.

Esto lo comprenderemos mejor con dos ejemplos básicos:
Para el primero vamos a recordar que en una expresión lógica con operador O (Or) basta con que una de los operandos sea verdadero (true) para que toda la expresión sea verdadera. Esto según su tabla de verdad, que se muestra a continuación:
Tabla de verdad para un O (Or)
Exp1 Exp2 Exp1 || Exp2
V V V
V F V
F V V
F F F

domingo, 8 de diciembre de 2013

Arregos en JavaScript

Definición de un arreglo

Un arreglo (array) es un tipo de dato complejo, conocido también como listas, matrices o vectores en otros lenguajes de programación.
Los miembros de un array son denominados elementos que se comienzan a enumerar desde una posición 0. Esto significa que cada elemento de un array posee una posición para poder ser accedido, a esa posición se le conoce como índice del arreglo.


Vale la pena mencionar que en JavaScript, por su naturaleza de tipología débil de datos, no requiere que los elementos de un array sean de un tipo de datos específico. Así que un arreglo en JavaScript puede poseer elementos numéricos, cadenas, booleanos e incluso otro datos complejo como otro array u objeto.


Declaración de un arreglo en JavaScript

Como un arreglo es un tipo de dato, es conveniente declararlo antes de utilizarlo dentro de una secuencia de comando (guión). La declaración de un arreglo se hace con la siguiente instrucción:
var nombre_array = new Array();

La instrucción anterior muestra que la palabra clave para crear el array sigue siendo var, igual que se hace para crear variables numéricas, cadenas o lógicas.
Además, para crear un array se utiliza el constructor de objetos (tema que veremos posteriormente en detalle) Array al que se antepone la palabra clave new, utilizada para crear un nuevo objeto de clase.

De este modo para crear un arreglo con las vocales del alfabeto español tenemos que utilizar la siguiente instrucción:
var vocales = new Array('a', 'e', 'i', 'o', 'u');

Si queremos un arreglo con los dígitos:
var digitos = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

JavaScript provee de una forma alternativa para declarar arreglos que es utilizando literales de array. Esta notación utiliza los corchetes que es el símbolo particular para representar arreglos en la mayoría de lenguajes de programación.

En esta notación, los dos arreglos anteriores quedarían de la siguiente forma:
var vocales = ['a', 'e', 'i', 'o', 'u'];
var digitos = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

Existe un caso particular en donde al crear el array se puede definir el tamaño del arreglo en lugar de los elementos que contiene. Esto se hace pasando un único argumento al constructor o al literal del array.

Ejemplos:
var numeros = new Array(20);

Esto es equivalente en la notación de literales de array:
var numeros = [20];

Las instrucciones anteriores crean un array de 20 elementos que no están definidos inicialmente.

Asignación de elementos al array.

Para añadir elementos a un arreglo, después de su definición se puede utilizar la asignación directa de elementos, como se indica a continuación:
var numeros = [5];
numeros[0] = 19;
numeros[1] = 31;
numeros[2] = 6;
numeros[3] = 53;
numeros[4] = 46;

Algo interesante con JavaScript es que no necesita asignar los elementos en índices consecutivos. Esto significa que después de los elementos anteriores, podría asignar el siguiente elemento sin tener ningún problema:
numeros[9] = 15;


Acceso a los elementos de un arreglo en JavaScript

El acceso a los elementos de un arreglo se puede hacer de forma directa:
document.write("Los elementos del array numeros son: [" + numeros[0] + ", " + numeros[1] + ", " + numeros[2] + ", " + numeros[3] + ", " + numeros[4] + ", " + numeros[9] + ", " + "]"); 

viernes, 6 de diciembre de 2013

Utilización de funciones en JavaScript

Una función es un conjunto de sentencias que realiza una tarea y que son autocontenidas en un bloque identificado con un nombre. Para que dichas sentencias sean ejecutadas por el navegador la función debe ser invocada mediante su nombre, en el caso que no sea una función anónima (explicaremos qué son las funciones anónimas más adelante en el contenidos de este tutorial), incluyendo los posibles parámetros o argumentos que se hayan definido al crearla.
Las funciones pueden ser invocadas dentro de un guión de JavaScript las veces que sea necesario, con distintos argumentos o inclusive con los mismos, si eso ayuda a resolver un problema.
Se dice que la principal ventaja de la utilización de funciones es que contribuye a la modularidad optimizando el código haciendo que se escriba una sola vez invocando únicamente a la función en otras secciones del guión, en lugar de tener que volver a escribir todas las instrucciones.
Existen varias formas de definir funciones en JavaScript, pero la más usual, similar a la utilizada en la mayoría de lenguajes de programación, es la que se muestra en la siguiente sintaxis:
function nombrefuncion(listaargumentos) {
    bloqueinstrucciones;
}

Donde:
  1. function: es la palabra clave de JavaScript para crear una función.
  2. nombrefuncion: es el identificador o nombre que se le asigna a la función y con el cual será invocada desde otras secciones del guión.
  3. listaargumentos: son los parámetros o argumentos que recibe la función cada vez que se desee invocar. Los argumentos son opcionales; es decir, puede crear una función que no necesite argumentos, aunque en la mayor parte de casos los necesitará.
  4. bloqueinstrucciones: son las sentencias que realizarán la tarea para la que la función ha sido diseñada.
Las funciones también pueden devolver valores que pueden ser utilizados en la parte del guión donde se invocó a la función. La devolución de valores tiene sentido si la función realiza algún cálculo, alguna operación de comparación o una cadena ingresada o construida mediante operaciones de concatenación, etc. Para que una función pueda devolver un valor, debe utilizar la sentencia return seguida por el nombre de la variable o el literal que contiene la expresión a devolver.

Veamos un primer ejemplo de función:
Archivo: hora.js
function hora(){
    //Crear una variable para la fecha utilizando 

    //la función predefinada de JavaScript
    //Date() que devuelve la fecha actual
    var fecha = new Date();
    var horas = fecha.getHours();
    var minutos = fecha.getMinutes();
    var segundos = fecha.getSeconds();
    var horaActual = horas + ":" + minutos + ":" + segundos;
    return horaActual;
}


Analicemos lo que esta función realiza y cómo lo hace. Primero se coloca el encabezado de la función con la palabra clave function seguida del nombre o identificador de la función, que en este caso es hora().
A continuación se crea una variable fecha a la que se le asigna lo que el constructor del objeto Date() devuelva, que es precisamente un objeto fecha.
Luego, utilizando los métodos del objeto Date() se extraen la hora, los minutos y los segundos. Estos métodos son getHours() para obtener la hora, getMinutes() para obtener los minutos y getSeconds() para obtener los segundos.
Finalamente se concatena la hora completa con el valor de las horas, los minutos y segundos de la forma como es usual mostrar la hora, separando cada componente con el signo dos puntos. Luego se devuelve la cadena con la hora completa utilizando la sentencia return.

Ahora hay que utilizar esta función e invocarla desde otro script para poder mostrar la hora actual en la página web. Este sería el código de la página web que hay que construir para probar la función:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Hora actual</title>
    <script type="text/javascript" src="js/hora.js">
    </script>
</head>
<body>
<header>
    <h1>
    <script type="text/javascript">
        if(confirm("¿Quiere saber la hora")){
            document.write("Son las " + hora());
        }
    </script>
    </h1>
</header>
</body>
</html>


Note que el script js se guardó en una carpeta llamada js y por eso en la etiqueta script en el atributo src se ha utilizado la ruta js/hora.js.

Las siguientes imágenes muestran la ejecución del script en el navegador utilizando la página hora.html que se describió previamente mostrando el código:




Utilización de argumentos en las funciones

En JavaScript, así como en todos los lenguajes las funciones pueden recibir argumentos o parámetros, que deben indicarse cuando se va a invocar la función y ser proporcionados en el mismo orden en que se definió en la función.

Como ya se indicó en alguna entrada anterior de este blog, JavaScript es un lenguaje con tipología débil y por esta razón cuando se definen los argumentos de una función, no se les indica ningún tipo de dato en particular.

Es así como una función que recibe argumentos en JavaScript se declara de la siguiente forma:
function distancia(x1, y1, x2, y2){
    var dx = x2 - x1;
    var dy = y2 - y1;
    return Math.sqrt(dx*dx + dy*dy);

}

Si observa, entre los paréntesis junto al nombre de la función se proporciona la lista de argumentos separados por comas, en este caso son: x1, y1, x2 y y2. En ningún lado se indica de qué tipo son estos argumentos, para JavaScript no es necesario. El valor específico que se le pase a la función cuando sea invocada indicará el tipo de valor a asiganar a cada argumento

Veamos un ejemplo completo:
<!DOCTYPE html>
<html lang="es">
<head>
   <title>Mostrar su nombre</title>
   <style type="text/css">
      table          {
           border-collapse:collapse;
         border:outset 3px MidnightBlue;
         background-color:LightBlue;
         font: normal 14px Arial,Helvetica,"Liberation Sans";
         margin: 12px auto;
         width:25%;
      }
      tr             {
         border:solid 1px MidnightBlue;
      }
      td             {
         border:solid 1px MidnightBlue;
         text-align: center;
      }
      .envio         {
         background-color:#e69cF6;
      }
      form input[type=text] {
         width: 240px;
      }
   </style>
   <script type="text/javascript">
       function muestranombre(nombre, apellido){
          alert("Eres " + nombre + " " + apellido);
          cnombre.value="";
          cnombre.focus();
       }
   </script>
</head>
<body>
   <form action="javascript:void(0);" name="frmnombre">
      <table>
        <tr>
          <td>Nombre:</td>
          <td>
             <input type="text" name="cnombre" placeholder="(Su nombre)" />
          </td>
        </tr>
        <tr>
          <td>Apellido:</td>
          <td>
             <input type="text" name="capellido" placeholder="(Su apellido)" />
          </td>
        </tr>
        <tr>
          <td colspan="2" class="envio">
            <input type="button" value="Ver" name="btnMostrar" onclick="muestranombre(document.frmnombre.cnombre.value, document.frmnombre.capellido.value);" />
          </td>
        </tr>
      </table>
   </form>
</body>
</html>


Al ejecutar el script en el navegador podrá verificar el funcionamiento del script anterior:






Variables estáticas

Aunque el nombre no lo parezca una variable estática se crea a partir de una propiedad de objetos que las funciones tienen en JavaScript. La característica más importante que tienen las variables estáticas es que su valor puede persistir entre distintas llamadas que se realicen a la función.



Esto solo puede entenderse con un ejemplo concreto, que mostramos a continuación:
function doSum(x, y){
    //Definiendo la variable estática
    //Note que la variable se crer como si fuera una propiedad de la función
    doSum.totalSum = doSum.totalSum + x + y;
    return (doSum.totalSum);
}


Nombre este archivo como suma.js y guárdelo dentro de una carpeta js que debe crear en la carpeta donde estará alojado el documento HTML.

Creamos un documento HTML para probar la función:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Suma con variable estática</title>
    <link rel="stylesheet" type="text/css" href="css/suma.css" />
    <script type="text/javascript" src="js/suma.js"></script>
</head>
<body>
<header>
    <h1>Variables estáticas</h1>
</header>
<section>
<article>
    <script type="text/javascript">
        //Definiendo la variable estática en el script para mantener
        //la suma en ejecución durante todas las llamadas
        doSum.totalSum = 0;
        document.write("Primera llamada: " + doSum(3,7) + "<br />");
        document.write("Segunda llamada: " + doSum(5,9) + "<br />");
        document.write("Tercera llamada: " + doSum(50,21) + "<br />");
    </script>
</article>
</section>
</body>
</html>


Llamemos al documento web anterior sumaestatica.html.

Agregamos una hoja de estilos para que el resultado tenga una buena apariencia:
* {
    border: none;
    margin: 0;
    padding: 0;
}

body {
    font: Normal 18px Arial,Helvetica,"Liberation Sans";
}

h1 {
    color: #2d3265;
    font: Bold 24px "Myriad Pro";
    text-align: center;
}

article {
    background: rgba(88,71,184,1);
    background: -moz-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(88,71,184,1)), color-stop(35%, rgba(127,120,235,1)), color-stop(71%, rgba(109,91,240,1)), color-stop(100%, rgba(117,181,230,1)));
    background: -webkit-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
    background: linear-gradient(135deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5847b8', endColorstr='#75b5e6', GradientType=1 );
    border: 6px outset #2d3265;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -o-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -ms-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: ;
    color: #f5eb82;
    margin: 18px auto;
    padding: 12px 16px;
    width: 28%;
}


Nombremos la hoja de estilos como suma.css dentro de una carpeta css que deberá crear dentro de la carpeta donde está alojado el documento HTML.

Probemos el sitio web en un navegador:


Examinaremos otros temas avanzados sobre funciones como funciones como objetos, funciones anónimas y  en futuras entradas, cuando hayamos visto objetos, arreglos, etc.

jueves, 5 de diciembre de 2013

Mostrar datos de JavaScript en una página web

document.write()

JavaScript utiliza el objeto  Document, construcción interna de JavaScript que se refiere al archivo HTML en el que resida el script que se está ejecutando.
El objeto Document posee una serie de métodos y propiedades que se pueden utilizar con diversos propósitos. Uno de estos métodos es write() que aplicado al objeto Document escribirá documento.write(). Este método recibe como argumento una cadena que es la que se escribirá en el navegador una vez ejecutada la instrucción.

Veamos el siguiente ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Escribir información en una página</title>
<style type="text/css">
h1 {
text-align: center;
}
span {
font-weight: bold;
color: Purple;
}
</style>
</head>
<body>
<header>
<h1>Escribir datos con document.write()</h1>
</header>
<section>
<article>
<p>
Tenemos esta página web que muestra en este primer párrafo texto ingresado directamente
en HTML estático.
</p>
<script type="text/javascript">
var msg = "Esta sección de la página se ha creado en la fecha-hora: " + document.lastModified + " generado con un bloque de JavaScript."; document.write(msg);
</script>
<p>
En esta sección se vuelve a agregar más contenido usando HTML estático dentro de etiquetas de párrafo.
</p>
</article>
</section>
</body>
</html>

El bloque de código delimitado por las etiquetas: <script>...</script> son las instrucciones JavaScript, primero se asigna una cadena a la variable msg que es declarada en la misma línea donde se le asigna el valor.
El símbolo "+" se utiliza en JavaScript para concatenar cadenas. Dentro del contenido de la cadena puede observar la utilización de la propiedad lastModified que es una propiedad del objeto Document. Para utilizarla se debe escribir document.lastModified, que obtiene la fecha y la hora en que el archivo fue modificado y guardado.

Al ejecutar la página que contiene este guión de JavaScript el resultado será el siguiente: