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);

lunes, 8 de octubre de 2012

Valores literales

Ya se ha mencionado en el apartado de características del lenguaje JavaScript en la sección tipología débil, que en JavaScript las variables no se declaran como de un tipo de dato específico y que una vez asignado el valor a la variable, es posible asignarle un tipo de valor completamente distinto, sin que esto provoque error alguno.
No obstante, lo anterior, en JavaScript se definen una clase especial de datos que se conocen como literales que hacen referencia a los valores concretos y fijos que se pueden asignar a las variables. Estos literales se dividen en tres tipos:
  1. Literales numéricos.
  2. Literales de cadena.
  3. Literales lógicos (o booleanos).

Literales numéricos.
En JavaScript todos los valores numéricos son considerados de un mismo tipo, no se clasifican en enteros, flotantes o dobles, como se hace en otros lenguajes. Son ejemplos de literales numéricos los siguientes valores:
0
45
2012
-58
0.09
3.14159
-15.5

También es posible representar los números enteros que sean demasiado grandes o demasiado pequeños en notación exponencial. Esta notación emplea la letra e o E seguida de un signo más (+) o de un signo menos (-), dependiendo de si el número es mucho mayor que cero o si el número es mucho muy cercano al valor cero.

Ejemplo:
9.87654e+5

El número anterior se puede convertir a un entero normal, multiplicando la parte del número que antecede a la letra e o E por 10 elevado al número que sigue al signo más (+). Así, multiplicaríamos 9.87654 * 10^5 con lo que obtendríamos 987,654.

Ejemplo:
3.4567e-4

En este caso el número que precede a la letra e debe dividirse entre 10 elevado al exponente indicado después del signo menos (-). Así, al dividir 3.4567 entre 10 elevado a la cuarta potencia (4) nos daría por resultado 0.00034567.

JavaScript también acepta valores enteros expresados en notación octal (base 8) o hexadecimal (base 16). Para indicar a JavaScript que un número está siendo representado en notación octal debe anteponer un 0 al número. De modo que, para representar un 11 decimal en octal, debe colocar el siguiente valor: 013.

En el caso de querer representar un número en notación hexadecimal en JavaScript, debe anteponer un cero y una letra equis, mayúscula o minúscula, al número. Estos números están todos en notación hexadecimal:
0x1F
0X93
0x19C0


Literales de cadena.
Una cadena es una secuencia de uno o varios caracteres que pueden ser letras, números o símbolos encerrados entre comillas dobles ("") o simples (''). Dicho esto, serían cadenas los siguientes literales:
"JavaScript"
"2 de noviembre del 2012"
'Ingrese un número'

Algunos caracteres en JavaScript para que puedan formar parte de una cadena deben ser escapados. Por ejemplo, si se está usando la comilla doble como delimitador y desea que una o más comillas dobles sean parte de la cadena, necesitará de algún medio para indicarle a JavaScript que la doble comilla que se está ingresando no es la de cierre de la cadena, si no un carácter más que formará parte de la cadena. Por ejemplo:
"JavaScript es un lenguaje \"interpretado\" en el cliente"

Del mismo modo, se puede requerir escapar caracteres de comilla simple en una cadena delimitada precisamente con comilla simple.
'<p class=\'primero\'>JavaScript en un lenguaje "interpretado" en el cliente.</p>'


Literales lógicos (booleanos).
Los literales lógicos que se pueden utilizar en JavaScript son los mismos que se utilizan en la mayoría de lenguajes que ya conoce, son el valor true para indicar verdadero y el valor false para indicar falso.
Aunque esto pueda dar la impresión de no ser muy útil, la posibilidad de comprobar si una variable o expresión condicional es verdadera o falsa resulta de mucho valor para la programación en JavaScript.

domingo, 7 de octubre de 2012

Operadores y precedencia de operadores

JavaScript proporciona operadores de varios tipos:

  1. Aritméticos.
  2. A nivel de bits.
  3. Relacionales o de comparación.
  4. Operadores lógicos.
  5. De incremento/decremento.
  6. Concatenación.

Operadores aritméticos.
Los operadores aritméticos son básicamente: el operador de asignación (=), el de suma (+), el de resta o signo negativo (-), el de multipliación (*), el de división (/) y el de módulo o residuo de división (%).

Ejemplos:
var x = 5;
var y = 2;
var r;
r = x + y; //El resultado es 7


Operadores a nivel de bits.
Los operadores a nivel de bits son: el Y (&), el O (|), el NO (^), el O exclusivo (~), el desplazamiento a la izquierda (<<) y el desplazamiento a la derecha (>>). Dada la naturaleza de alto nivel de JavaScript, difícilmente los utilizará, salvo que quiera hacer uso de algunas características avanzadas proporcionadas por los navegadores modernos.

Operadores relacionales o de comparación.
Para comparar valores de variables y objetos el lenguaje JavaScript proporciona una serie de operadores relacionales como: el igual a (==), estrictamente igual a (===), el distinto o diferente a (!=), el estrictamente distinto o diferente a (!==), el menor a (<), el menor o igual a (<=), el mayor (>), el mayor o igual a (>=). Al utilizar operadores relacionales en una expresión se producirá la evaluación de la misma como un valor lógico que puede ser verdadero (true) si se cumple una condición o falso (false) si la condición no se cumple.

Ejemplos:
var x = 14;
var y = 21;
if(x > y){ // El resultado se evaluará como verdadero o falso dependiendo de los valores de x y y
   document.write(x + " es mayor que " + y);
}
else{
   document.write(y + " es mayor que " + x);
}


Operadores lógicos.
Los operadores lógicos son exactamente tres: el Y lógico (&&), el O lógico (||) y el NO lógico (!). Estos tres operadores se pueden utilizar en conjunto con los operadores relacionales para crear expresiones más complejas.

Ejemplos:
var x = 7;
var y = 4;
var r;
if((x < y) && (y % 2 == 0)){
   r = x*y;
   alert("El resultado es: " + r);
}


Operadores de incremento/decremento.
Estos operadores se utilizan para incrementar o decrementar el valor de una variable en una unidad. La característica de este tipo de operador es que además de incrementar o decrementar el valor, asigna el resultado en una sola operación. Para incrementar se utiliza la secuencia de caracteres ++ y para decrementar se utilizar la secuencia de caracteres --.

Ejemplos:
var x = 6;
alert(x--); //Primero se asigna y luego se decrementa. Imprimirá 6 en el resultado

_________________________________________________________________________

var x = 6;
alert(++x); //Primero se incrementa, luego se asigna. Imprimirá 7 en el resultado


Operador de concatenación
El operador de concatenación permite unir cadenas. El operador puede utilizarse para unir dos cadenas explícitas, o para unir una cadena con otro tipo de dato, como número. El símbolo utilizado para la operación de concatenación es el mismo que para la suma aritmética. Esto implica que debe tener cuidado de no incurrir en alguna ambigüedad a la hora de utilizarlo.

Ejemplos:
var name = "Julio Moreno";
alert("Tu nombre es: " + name);



Precedencia de operadores
La precedencia de operadores determina el orden en que serán evaluadas las expresiones complejas que incluyan más de dos operandos y un operador, que por su misma naturaleza, resultarán obvias. Así, al evaluar 3 + 9, resultará obvio que el resultado debe ser 12. Ahora bien, si evaluamos 5 + 10/2, se preguntará si el resultado es 7.5 o 10. Esta duda obedece al hecho de que no sabe si primero se realizará la suma y luego, la división, o si, por el contrario, primero se realizará la división y luego la suma.
Para resolver este tipo de ambigüedad JavaScript utiliza la precedencia de operadores para evitar confusión, de modo que independientemente de la complejidad de una expresión, el resultado siempre sea el mismo.
La siguiente tabla muestra el orden de precedencia de los operadores de JavaScript:

Precedencia de operadores de JavaScript
Operador Operación Orden de evaluación Orden de precedencia
++ Incremento Primero Der. -> Izq.
-- Decremento Primero Der. -> Izq.
- Negación Primero Der. -> Izq.
! Not Primero Der. -> Izq.
*, /, % Multiplicación, División y Módulo (o Residuo) Segundo Izq. -> Der.
+, - Suma, Resta Tercero Izq. -> Der.
+ Concatenación Tercero Izq. -> Der.
<, <= Menor que, Menor o igual que Cuarto Izq. -> Der.
>, >= Mayor que, Mayor o igual que Cuarto Izq. -> Der.
== Igual Quinto Izq. -> Der.
!= Distinto Quinto Izq. -> Der.
=== Identidad Quinto Izq. -> Der.
!== No identidad Quinto Izq. -> Der.
&& And Sexto Izq. -> Der.
|| Or Sexto Izq. -> Der.
?: Condicional Séptimo Der. -> Izq.
= Asignación Octavo Der. -> Izq.
+=, -=, *=, /=, %= Asignación aritmética para suma, resta, etc. Octavo Der. -> Izq.

jueves, 20 de septiembre de 2012

Características principales del lenguaje JavaScript

El lenguaje JavaScript como lenguaje tiene ciertas características fundamentales que determinan la forma en que es interpretado cada vez que se carga la página web en el navegador. Entre estas características se encuentran:

Distinción entre mayúsculas y minúsculas.

JavaScript es un lenguaje sensible al uso de letras mayúsculas y minúsculas, lo que significa que para el lenguaje no es igual una palabra escrita toda en letras minúsculas a otra con los mismos caracteres con una, varias o todas en mayúsculas. Por ejemplo, los identificadores salario, Salario, SaLaRio y SALARIO dentro de una secuencia de comandos de JavaScript harían referencia a variables distintas.
La distinción entre mayúsculas y minúsculas se aplica a todos los aspectos del lenguaje: palabras clave, operadores, identificadores de variables, manejadores de eventos, propiedades de objetos, etc. De hecho, todas las palabras clave de JavaScript están definidas en minúsculas. Así cuando use un condicional if, debe asegurarse que lo escribe en minúsculas y no usar If, iF o IF.

Espacios en blanco.

Los caracteres de espacio en blanco son todos aquellos caracteres que ocupan un espacio en la pantalla sin representación visible. Es así que son espacios en blanco los caracteres ingresados con la barra espaciadora, los espacios ingresados con la tecla de tabulación y los caracteres de nueva línea ingresados con una tecla ENTER.
Lo que debe tener en mente con respecto a los espacios en blanco es que para JavaScript cualquier secuencia excesiva de caracteres de espacio en blanco es ignorada, de modo que para JavaScript será lo mismo tener cualquiera de las siguientes instrucciones:
x = x + 1;
x         =        x       +       1;
x
=
x+1
;
Debemos concluir entonces que el uso de excesivos espacios en blanco es más una conveniencia del programador que del intérprete de las secuencias de comando. El uso intencionado de excesivos espacios en blanco sirve exclusivamente para volver el código más legible a los programadores.

Comentarios.

Un aspecto indispensable a la hora de digitar código para cualquier programador es documentarlo, lo que significa, que es muy importante comentar el código a medida que se va ingresando
Los comentarios son anotaciones relevantes que se ingresan directamente dentro del código fuente de una secuencia de comandos con el propósito de indicar el propósito del uso de una función, de una o más variables, de la utilización de una sentencia condicional o bucle, tanto para el mismo programador, como para cualquier otro que vaya a utilizar o modificar ese código.
En JavaScript se pueden utilizar comentarios de una línea o comentarios de bloque. Se utiliza la secuencia de caracteres compuesta por dos barras inclinadas consecutivas (//) para el comentario de una línea. En tanto que se utiliza la secuencia de caracteres compuesta por una barra inclinada y un asterisco para abrir un comentario de bloque y un carácter asterisco seguido de una barra inclinada para cerrarlo.
Ejemplos:
var edad = 25; //Almacena la edad del usuario.
/* La función square espera un argumento o parámetro numérico y devuelve el cuadrado de ese valor */
function square(x){
     return x * x;
}


Tipología débil.

JavaScript es un lenguaje que permite trabajar con variables sin necesidad de declarar de qué tipo son, como es el caso de lenguajes fuertemente tipificados como lenguaje C++, Java o Visual Basic. En JavaScript el tipo de dato es deducido del contexto en que es utilizada, esto es, en el momento en que se le asigna un valor. Así si se le asigna un número, entonces la variable asumirá que su tipo es un número, si por el contrario, se le asigna una cadena de caracteres, entonces JavaScript entenderá que la variable es una cadena. Lo mismo aplica para un datos booleano. Así, si en determinado momento el valor de una variable numérica fuera cambiado a una cadena, el tipo de dato de dicha variable cambiará de forma automática. No lanzará un error, como es el caso en lenguajes fuertemente tipificados.
La tipología débil de JavaScript obliga a tener muchas precauciones, ya que aunque pareciera ser una bendición, no tener que declarar las variables de un tipo específico antes de usarlas, también puede conllevar ambigüedades potenciales, sobre todo en el uso de operadores como el "+", que es utilizado tanto para la suma numérica, como para la concatenación de cadenas. De modo que:
document.write("3" + 6);

Aparentemente, el resultado de la expresión anterior debería ser 9; sin embargo, observará que será 36 al ejecutarse el script, ya que el operador "+" tiene como prioridad la concatenación al intentar sumar un dato cadena con otro numérico.


Instrucciones.
Las instrucciones constituyen la esencia de un lenguaje como JavaScript, ya que es lo que el intérprete analiza para realizar las acciones específicas.
En JavaScript, las instrucciones se pueden terminar con un carácter de punto y coma (;) o con un carácter de retorno de carro (ENTER). A pesar de que pueden utilizarse uno u otro, es conveniente que se use el punto y coma como recomendación.

Ejemplos:
var x, y;
x = 2;
y = 5;
x = x + 3;
y = y - 2;

_________________________________________________________________________
var x, y
x = 2
y = 5;
x = x + 3;
y = y - 2;


Si se van a colocar dos o más instrucciones en una misma línea, la única posibilidad sería utilizar el punto y coma como separador de instrucciones.

Ejemplo:
x = 5; y = 12; z = 8;

Para crear un bloque de instrucciones se deben utilizar las llaves, iniciando el bloque con la apertura de una llave ({) y cerrando el bloque con una llave de cierre (}). Las situaciones donde es necesario definir un bloque de instrucciones son diversas, por ejemplo, la definición de las instrucciones que comprenden una función, la delimitación de las instrucciones que están dentro de una estructura de control, como las sentencias condicionales o repetitivas, entre otras que iremos conociendo a medida avancemos en este tutorial.

Definiciones básicas de JavaScript

Lo primero que haremos antes de comenzar de lleno a conocer la sintáxis del lenguaje JavaScript y la forma en que ingresaremos código de JavaScript dentro de un documento HTML es definir una base de términos comunes cuando se habla de lenguajes de programación y de scripts que nos permitirán a lo largo de este blog o artículo transmitir los contenidos de forma clara y concisa.

Terminología básica de lenguajes de programación y de scripts
Nombre Definición Ejemplo
Token Unidad léxica indivisible más pequeña de un lenguaje. Dicho de otro modo, podemos definirlo como una secuencia consecutiva de caracteres que tendría un significado completamente distinto si fueran separados por un espacio en cualquier posición. Identificador y palabra clave son ejemplos de token. Literales como 3.14159 y "¿Estás seguro que deseas cerrar la página?"
Literal Un valor encontrado directamente en el script. Valores concretos como 5.25 (literal numérico),
"Se han guardado los datos" (literal de cadena)
y [2, 4, 6] (literal de arreglo o matriz).
Identificador Nombre asignado a una variable, constante, objeto, función o etiqueta dentro de un programa o secuencia de comando. x, PI, registro, sueldo, etc.
Operador Elementos token incorporados del lenguaje que realizan operaciones como asignación, suma, resta, multiplicación, división, concatenación, comparación de valores, etc. = (igual),
+ (suma y concatenación),
- (menos),
<= (menor o igual que),
etc.
Expresión Combinación de elementos token, a menudo literales o identificadores, combinados con operadores que pueden dar como resultado un valor específico. 2.0 (un token es considerado una expresión en su forma más simple),
var msg = "Esta es una cadena"; (operador de asignación),
(x + 2) * 3,
etc.
Instrucción Comando imperativo que provoca un cambio en el estado del entorno de ejecución, en el valor de una variable, una definición o el flujo de ejecución. Un programa puede definirse como una secuencia de instrucciones. x = x + 5;
return true;
if(x%2 != 2)
   alert(x + " es impar");
Palabra clave Palabra que es parte del lenguaje en sí. Las palabras clave no se pueden utilizar como identificadores. if, switch, while, do, function, var, etc.
Palabra reservada Palabra que se podría convertir en parte del lenguaje en sí. También las palabras reservadas no se pueden utilizar como identificadores, aunque esta restricción a veces no está impuesta de forma estricta. class, const, public, etc.

¿Qué se puede hacer con JavaScript?

Uno de los aspectos más importantes de dar a conocer es todo lo que puede hacer con el lenguaje JavaScript, ya que esto puede servir para entusiasmar a los que por curiosidad han decidido comenzar a aprender este lenguaje. Realmente, las cosas que se pueden hacer con JavaScript son muy variadas, entre las más destacadas están:
  1. Puede obtener la información sobre el navegador que está usando el usuario, la versión del mismo, el sistema operativo sobre el que se está ejecutando e, incluso la resolución de pantalla que tiene configurada en su computadora.
  2. Puede trabajar con diálogos emergentes e interactivos creados con elementos div, en lugar de ventanas emergentes, que por razones de seguridad y diseño han dejado de utilizarse.
  3. Puede crear sistemas de menú sofisticados con submenús emergentes que se activan con la acción del usuario.
  4. Se pueden validar los valores que se ingresan en los campos de formulario antes de que sean enviados al servidor.
  5. Puede crear árboles de navegación para facilitar a los usuarios moverse de una página a otra por su sitio web.
  6. Puede crear efectos de sustitución de imágenes controlados por la acción de colocar el puntero del ratón o retirarlo de la misma.
  7. Puede crear algunas animaciones como transiciones de imágenes y objetos de una página web.
  8. Puede cambiar la posición de elementos HTML en la página web de forma dinámica o controlada por el movimiento del puntero del ratón.
  9. Puede redirigir al usuario de una página a otra, sin necesidad de un enlace estático.
  10. Puede realizar algunos cálculos con los valores ingresados en campos de formulario.
  11. Puede obtener la fecha del sistema operativo donde se está ejecutando la página web en el cliente.
  12. Se pueden crear sofisticados controles de calendario para seleccionar una fecha, en lugar de que sea ingresado manualmente por los usuarios en campos de formulario.

Estos son algunos usos, destacando el hecho que se han omitido algunos usos que con el paso del tiempo han quedado desaconsejados o que, con la evolución de los lenguajes (X)HTML y CSS, han quedado en manos de aquéllos y ya no de JavaScript.

Versiones de JavaScript y soporte de los navegadores

Antes de continuar es necesario mencionar las distintas versiones de JavaScript y los avances que con cada una ha venido teniendo el lenguaje y el soporte que los distintos navegadores le han venido dando con el paso del tiempo.
Hay que destacar también que junto a la evolución del lenguaje JavaScript, también han venido evolucionando el lenguaje HTML, con su versión más reciente, la 5.0 que ya es soportada por buena parte de los navegadores modernos, y del lenguaje CSS, que también ya tiene soporte de la versión 3.0 también, por buena parte de dichos navegadores. Como siempre, con el Internet Explorer hay que dedicar algún esfuerzo y mucho tiempo adicional para lograr compatibilidad.
Las distintas versiones que se han conocido y a las que la mayor parte de navegadores modernos han dado soporte es a las siguientes:
  • JavaScript 1.0: Nació junto a Netscape 2. Cuando se lanzó este navegador, los creadores de Netscape crearon también este lenguaje, soportando una gran cantidad de instrucciones y funciones.
  • JavaScript 1.1: Apareció junto a la versión 3 de Netscape y del Internet Explorer 3 incorporando unas pocas funciones más que su versión anterior, entre ellas el tratamiento de imágenes de forma dinámica y la posibilidad de creación de matrices (arrays).
  • JavaScript 1.2: Se lanzó junto con la aparición de las versiones 4.0 de los navegadores más populares de ese momento: Netscape e Internet Explorer. El principal problema con esta versión fue la distinta implementación que le dieron ambas empresas Netscape y Microsoft producto de la constante lucha que mantuvieron por la obtención de la mayor parte del mercado.
  • JavaScript 1.3: Versión que fue lanzada con la aparición de las versiones 5.0 de ambos navegadores. Con esta versión se lograron ciertos avances en busca de la estandarización; sin embargo, siempre hay detalles que considerar a la hora de la implementación.
  • JavaScript 1.5: Es una versión completamente compatible con el estándar ECMA-262, Edition 3.
  • JavaScript 1.6, 1.7 y 1.8: Al parecer, a partir de la versión 1.6 prácticamente solo el navegador Firefox implementa soporte completo de todas sus características.
En la siguiente dirección encontrará el detalle del soporte que los distintos naveadores ampliamente conocidos dan al lenguaje JavaScript:
Tabla de compatibilidad entre navegadores de las distintas versiones de JavaScript.

Relación entre JavaScript y Java

Sinceramente, este es un punto que ni siquiera debería discutirse por el hecho de que no existe ninguna relación entre un lenguaje y otro. De hecho, el único parecido, a parte de algunos detalles de la sintaxis, está en el nombre. Es por esto que en muchos textos y en muchos sitios web se suele hacer una comparación como la que mostraremos a continuación, haciendo uso de una tabla para facilitar la lectura.

JavaScipt Java
JavaScript es un lenguaje interpretado en un navegador a medida que la página es cargada en el navegador. Java es un lenguaje de programación compilado que generalmente requiere un entorno de desarrollo.
JavaScript es un lenguaje basado en objetos pero que dista todavía de todas las exigencias de la Programación Orientada a Objetos, aunque si pueden simularse objetos mediante algunos artificios de programación que pueden parecer complejas abstracciones de programación para los mortales. Se dice que en JavaScript es posible utilizar los objetos, pero no se brindan las herramientas nativas para crear nuestros objetos propios. Java es un lenguaje de programación completamente orientado a objetos ya que provee todos los elementos necesarios para la creación de clases, implementación de la herencia y polimorfismo.
El lenguaje JavaScript se puede insertar (embeber) dentro del código HTML del documento web haciendo uso de etiquetas especiales. El lenguaje Java debe ser referenciado desde el código HTML, no existe una forma de incorporarlo directamente dentro del propio documento web. Los códigos de Java se crean en pequeños archivos a los que se llama Applets
JavaScript permite trabajar con variables y tipos de datos sin necesidad de declararlos. Esto se debe a la característica de ser un lenguaje débilmente tipificado. En Java todas las variables y datos utilizados deben ser declarados de forma obligada para poder ser ejecutados. Esta característica hace que Java sea un lenguaje fuertemente tipificado.
En JavaScript se produce un enlazado dinámico de objetos. Esto significa que la validación de las referencias a objetos se realizan en tiempo de ejecución; es decir, en el momento en que el navegador intenta cargar la página web. En Java se produce un enlazado estático de los objetos, lo cual quiere decir que la validación de las referencias a objetos se realiza en tiempo de compilación.

¿Qué se necesita para crear scripts de JavaScript?

Básicamente, para desarrollar guiones, secuencias de comando o scripts de JavaScript basta con un editor de texto, tan básico como el Bloc de notas de Windows, el TextEdit de Mac o el gEdit de Linux.


La edición de un script JavaScript puede realizarse dentro del mismo documento HTML (archivo .html) o en un documento independiente (archivo .js) que luego tendrá que vincular al documento html sobre el que actuará.

Para poder visualizar el resultado de su guión o secuencia de comandos JavaScript, necesitará de un navegador. Hoy en día las preferencias por los navegadores está muy dispersa. Atrás han quedado los días en que solo habían dos opciones Internet Explorer o Netscape.

Lenguaje JavaScript

El lenguaje JavaScript es uno de los lenguajes de script interpretado en el lado del cliente utilizado ampliamente para el desarrollo de aplicaciones web. Una de sus principales ventajas es que es reconocido por la totalidad de navegadores que conocemos en la actualidad por lo que no se necesita de ningún programa adicional instalado en la computadora de los clientes.


Entre los principales usos que se le da al lenguaje JavaScript están:

  • Validación de entradas de campos de formulario.

  • Generación de efectos visuales en el navegador.

  • Integración de galerías de imágenes interactivas con el usuario.

  • Creación de sofisticadas interfaces de menús desplegables para la navegación en un sitio web.

  • Uso de atractivos campos de selección de fechas en formularios usando calendarios dinámicos.

  • Ingreso de contenidos mediante complejos editores de texto enriquecido.