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:

domingo, 14 de octubre de 2012

Formas de agregar JavaScript en documentos HTML

Existen cuatro formas en las que se puede agregar código de JavaScript en los documentos HTML. Estas son:
  1. Dentro de un elemento <script >...</script>.
  2. Usando un archivo vinculado .js.
  3. Haciendo uso de manejadores de eventos dentro de algunos elementos HTML.
  4. Mediante la sintaxis de dirección pseudo-URL javascript: referida a un enlace.

1. Hacer uso del elementos script.
El método más común para incluir código JavaScript dentro de un documento HTML es utilizando el elemento SCRIPT. Los navegadores que reconocen scripts o guiones asumen que el texto comprendido entre etiquetas <script>...</script> corresponde a algún lenguaje de script, de forma predeterminada se utiliza JavaScript, aunque es posible indicar mediante el uso del atributo languaje, el lenguaje que se debe utilizar.
<script language="JavaScript">
   var msg = "Usando JavaScript";
   document.write("<p>Estamos " + msg + ".</p>");
</script>

De acuerdo a la sintaxis propuesta por el consorcio W3C, en lugar del atributo language, debería hacer uso del atributo type, indicando el tipo MIME del lenguaje de script a utilizar. El tipo MIME para el lenguaje JavaScript es text/javascript. Así, el ejemplo anterior quedaría:
<script type="text/javascript">
   var msg = "Usando JavaScript";
   document.write("<p>Estamos " + msg + ".</p>");
</script>


En algún momento, se solía utilizar ambos atributos, para lograr la mayor compatibilidad posible con todos los navegadores en ese momento, no obstante, hoy en día todos los navegadores han implementado la recomendación de la W3C, por lo que puede hacerse uso únicamente del atributo type para indicar el lenguaje que será utilizado en el script.
Un mismo documento HTML puede contener uno o varios elementos SCRIPT, como se muestra a continuación:


Al ejecutar el script se ejecutarán dos scripts. El primero le solicitará su nombre y el segundo le solicitará su edad. Al final se mostrará en la página web el nombre y edad de quién ejecute el script.




2. Archivo vinculado .js
Una de las formas, más recomendadas para incluir código de JavaScript a un documento web es hacer uso del atributo src en el elemento SCRIPT, de modo que no se inserte el guión directamente en el documento HTML.Ingrese el siguiente código usando el Notepad++:


Guarde el script en un archivo con extensión .js en alguna carpeta en el disco de su computadora. Llame al script comparacion.js.


Cree el documento HTML, siempre con el Notepad++ y guárdelo con el nombre comparacion.html.
Ejemplo de comparación entre 2 cantidades ingresadas


Página web después de ingresar dos cantidades mediante diálogos prompt().


3. Manejadores de eventos en elementos HTML
Esta ha sido la forma de utilizar JavaScript para controlar la interacción del usuario con casi cualquier elemento de la página web; sin embargo, hoy en día, la más desaconsejada. Este método permite incluir, en forma de atributo de algunos elementos HTML, código de JavaScript que será ejecutado cuando se produzca el evento en dicho elemento producto de la interacción del usuario con la página. A estos atributos HTML, se le denomina manejadores de eventos.

Veamos un ejemplo:
<form>
<input type="button" value="Pulsar" onclick="alert('Has pulsado el botón')" />
</form>


El ejemplo anterior hará aparecer un diálogo alert en el navegador indicándole al usuario que hizo clic sobre el botón.


4. Direcciones pseudo-URL
Los navegadores actuales suelen reconocer las direcciones pseudo-URL. Estas permiten invocar una instrucción desde un enlace, por ejemplo. Si desea comprobar si con su navegador puede utilizar sintaxis de pseudo-URL, puede ingresar una instrucción como la siguiente en la barra de direcciones del mismo: javascript:alert('Esta es una dirección pseudo-URL'). Puede ser que por razones de seguridad, su navegador no realice ninguna acción. Sin embargo, la comprobación final, puede hacerse con un script sencillo como el siguiente:
<a href="javascript:prompt('Ingresa tu nombre','')" title="Tu nombre">
   Clic para ingresar tu nombre
</a>
El resultado es el siguiente:

Creación de los primeros scripts con JavaScript

Una vez que hemos explorado todos los aspectos básicos del lenguaje JavaScript, es tiempo de comenzar a crear nuestros primeros guiones, secuencias de comando o scripts. Lo primero que debemos saber para ese propósito es lo que necesesitaremos para poder crearlos. El único programa que se requiere para crear scripts de JavaScript es un editor de texto, que bien podría ser el Bloc de notas de Windows, el TextMate de Mac-OS o el gEdit de Linux.
Los scripts de JavaScript, pueden crearse dentro de los mismos documentos HTML que se visualizan con un navegador o estar guardados en archivos independientes con extensión .js.
Por ejemplo, en el siguiente documento HTML, se ha incorporado, entre las etiquetas especiales <script>...</script> un bloque de código JavaScript utilizando el Bloc de notas para su creación:



Notará que el código JavaScript es el que aparece entre las etiquetas script:
<script language="JavaScript" type="text/javascript">
...
</script>


La primera de las instrucciones anteriores abre un bloque dentro del documento que le indica al navegador que las instrucciones que vienen son código JavaScript, en tanto que la segunda etiqueta (</script>), indica al intérprete del navegador que el bloque de código JavaScript ha terminado.
Cuando haya terminado de digitar todas las líneas deberá guardar el script en un archivo .html, no .js, ya que el documento anterior sigue siendo un documento web, aún y cuando incluya unas líneas de JavaScript.

El siguiente paso a realizar, una vez guardado el archivo, es visualizarlo en un navegador. Abra el navegador de su preferencia y abra el archivo .html para poder ver el resultado.


Es conveniente indicar que si no logra visualizar el resultado, seguramente es porque cometió algún error al digitar el código del guión JavaScript. Revise detenidamente y trate de corregirlo hasta que lo haga funcionar.

CONSEJO: Hay que indicar para los que se están iniciando en el mundo de la programación que una de las actividades más frustantes al inicio es encontrar los errores que se comenten al digitar las secuencias de comando o guiones. Este es un proceso que debe realizar y que después de pagar el derecho de piso aprenderá a detectar sus errores de forma más rápida y eficiente. Es mejor en un principio digitar todo el código y no copiarlo y pegarlo. Este debe ser el último recurso y solamente deberá hacerlo si ya intentó varias veces corregir y no ha logrado hacer funcionar el script.

Tipos de datos en variables

En JavaScript se pueden dividir los tipos de datos que se pueden asignar a las variables en dos categorías. La primera son los tipos de datos primitivos y la segunda son los tipos de datos compuestos.

Tipos de datos primitivos.
Los tipos de datos primitivos soportados por JavaScript son cinco:
  1. Números.
  2. Cadenas.
  3. Lógicos.
  4. No definidos.
  5. Nulos.
Números
En JavaScript el tipo de dato numérico abarca tanto los valores enteros como los de punto flotante. Todos los tipos numéricos en JavaScript están representados en el formato de punto flotante de doble precisión que requiere de 64 bits de largo y admite magnitudes de punto flotante que van desde ±1.7976x10308 hasta ±2.250×10-308. Aunque JavaScript debería ser capaz de manejar números enteros de una magnitud de hasta 253, resulta que no es así, por razones de eficacia, de modo que muchos de los operadores de JavaScript actuarán solamente sobre valores de 32 bits que en términos prácticos son valores que van desde 231-1 hasta -231 (de 2147483647 a -2147483648).
Los números en JavaScript se componen de dígitos, seguidos opcionalmente de un punto decimal, luego de más dígitos y también, un exponente opcional. El exponente se indica anteponiendo una letra e, que puede estar en minúsuclas o en mayúsculas, seguido de un signo más o menos opcional para indicar un exponente negativo y por último uno o varios dígitos que darán valor al exponente.
Bajo las consideraciones anteriores, los siguientes números serían válidos en JavaScript:

10
-3.75
-5556e25
-6.5E-16
349e+95


Mientras que los siguientes, serían valores numéricos no válidos en JavaScript:

2,624
11e100.6
342e5e21
E25


Cadenas
En una cadena en JavaScript, se pueden incluir caracteres alfabéticos, numéricos o signos de puntuación, teniendo en cuenta que ciertos caracteres, como el salto de línea, no puede ser introducido de forma directa con la tecla ENTER (INTRO). Para poder hacer uso de caracteres problemáticos dentro de una cadena debe hacerse uso de las secuencias de escape. Por ejemplo, la siguiente instrucción crea una cadena y la imprime en el navegador.

var cadena = "Primera línea. \nSegunda línea";
document.write(cadena);


Lógicos
Los datos lógicos o booleanos toman su nombre de George Bool, el lógico del siglo XIX que desarrolló el sistema lógico de verdadero/falso que luego se utilizaría como base de los circuitos digitales.
Los valores que se utilizan en los datos lógicos son únicamente dos: true (verdadero) y false (falso). Las expresiones condicionales toman siempre un valor lógico, luego de ser evaluadas. Por ejemplo, la expresión:
x < y, arrojará un valor verdadero o falso, dependiendo de los valores asignados a x y a y.

Undefined
El tipo de dato undefined o no definido se utiliza para variables o propiedades de objetos que o bien, no existen o no se les ha asignado valor alguno. El único valor que puede tener un tipo no definido es undefined. La siguiente instrucción imprimirá un valor undefined:

var msg;
alert(msg);


Null
El valor null indica un valor vacío o inexistente. Es esencialmente un contenedor de espacio que no representa nada. Asumiremos que el único valor posible para el tipo de valor null es precisamente null.


Tipos de datos compuestos.
Los objetos son la base para todos los tipos de datos no primitivos que se utilizan en JavaScript. Un objeto es precisamente un tipo de dato compuesto que puede almacenar tipos primitivos y compuestos. Es así que, los arreglos (arrays) en JavaScript tienen más estructura que los mismos objetos declarados como Object.

Los objetos.
Un objeto es una colección que puede contener datos primitivos o compuestos, incluyendo las funciones y otros objetos.
A los miembros de un objeto se les denominan propiedades, en tanto que a las funciones miembro se les conoce como métodos.
Para acceder a las propiedades de un objeto se utiliza un punto en la sintaxis, anteponiéndolo al nombre de la propiedad, justo después del nombre del objeto. Por ejemplo, la información sobre el nombre y versión del navegador que se está utlizando se puede acceder a través de las propiedades appName y appVersion de la siguiente forma:
document.write('appName :' + navigator.appName + '<br>');
document.write('appName :' + navigator.appVersion + '<br>');

Para invocar a los métodos de un objeto se utiliza la misma notación, con la diferencia que inmediatamente después del nombre del método se utilizan paréntesis, con lo que el intérprete entenderá que en este caso se está invocando un método. Por ejemplo, la siguiente instrucción invoca la método close() del objeto window:
window.close();

Los arreglos.
Un arreglo (array) es una lista ordenada mediante índices que puede contener tipos de datos primitivos y compuestos. A los arreglos se les suele denominar también vectores, matrices o listas en otros lenguajes de programación. En JavaScript, los arreglos son tratados como objetos. A los miembros de un arreglo se les conoce como elementos y para acceder a estos debe hacerse uso de un índice que para el primer elemento del arreglo será el índice cero (0). Esto significa que a cada elemento de un arreglo se le asigna un índice, que normalmente debería ser un valor entero no negativo que indicará la posición de dicho elemento dentro del arreglo.
Para poder acceder a cada elemento individual en el arreglo, se utiliza el nombre del arreglo y, entre corchetes se encierra el índice del elemento al que se desea acceder, teniendo cuidado de no intentar acceder a un índice de arreglo sin valor asignado. Por ejemplo:

var cadena = [];
cadena = "Estamos aprendiendo JavaScript"; 
alert(cadena);