TEMA 2

Contenido
1.- Fundamentos de javascript. .............................................................................................................. 1
1.1.- Comentarios en el cdigo. .......................................................................................................................2
1.2.- Variables. ................................................................................................................................................2
1.3.- Tipos de datos. ........................................................................................................................................3
1.3.1.- Conversiones de tipos de datos. ................................................................................................................................ 5
1.4.- Operadores. ............................................................................................................................................6
1.4.1.- Operadores de comparacin. ..................................................................................................................................... 6
1.4.2.- Operadores aritmticos. ............................................................................................................................................. 7
1.4.3.- Operadores de asignacin. ......................................................................................................................................... 8
1.4.4.- Operadores booleanos. .............................................................................................................................................. 9
1.4.5.- Operadores bit a bit. ................................................................................................................................................... 9
1.4.6.- Operadores de objeto. .............................................................................................................................................. 10
. (punto) .............................................................................................................................................................................................. 10
[] (corchetes para enumerar miembros de un objeto). ...................................................................................................................... 10
Delete (para eliminar un elemento de una coleccin). ...................................................................................................................... 10
In (para inspeccionar mtodos o propiedades de un objeto). ........................................................................................................... 11
instanceof (para comprobar si un objeto es una instancia de un objeto nativo de JavaScript). ....................................................... 11
1.4.7.- Operadores miscelneos. ......................................................................................................................................... 11
El operador coma , .............................................................................................................................................................................. 11
? : (operador condicional) ................................................................................................................................................................... 12
typeof (devuelve el tipo de valor de una variable o expresin). ........................................................................................................ 12

1.5.- Condiciones y bucles. ............................................................................................................................12

1.5.1.- Estructuras de control............................................................................................................................................... 12
Construccin if .................................................................................................................................................................................... 13
Construccin if else ......................................................................................................................................................................... 13
1.5.2.- Bucles. ........................................................................................................................................................................ 13
Bucle for. ............................................................................................................................................................................................. 13
Bucle while()........................................................................................................................................................................................ 14
Bucle do while(). .............................................................................................................................................................................. 14
1.5.3.- Ejemplo sencillo con JavaScript. ............................................................................................................................... 14
Estructura del lenguaje javascript Tema 2

Estructura del lenguaje javascript

CASO PRCTICO
En "BK Programacin", han decidido ponerse manos a la obra y Antonio comienza a estudiar los
fundamentos del lenguaje JavaScript, (siempre bajo la tutora de Juan, que estar ah para
ayudarle en todo momento).
En la unidad anterior Antonio analiz las posibilidades de los lenguajes de script, decidi que lenguaje
empleara para la programacin en el entorno cliente y vio cmo insertar en la pginaHTML dicho
lenguaje de script.
Cmo han decidido emplear el lenguaje Javascript, lo primero que har Antonio es ver los
fundamentos de dicho lenguaje, y cul es la estructura bsica para comenzar a programar lo ms
pronto posible.
Ada est muy entusiasmada con este proyecto y est convencida de que Antonio ser capaz de
hacer ese trabajo sin ningn problema.

1.- Fundamentos de javascript.

Caso prctico
Juan habla con Antonio y le recomienda leer las bases y fundamentos de JavaScript, en los cules
se explica cmo se ponen comentarios en el cdigo, cmo se definen variables, estructuras de
control, etc.
ste va a ser uno de los primeros pasos que Antonio tendr que dar para el estudio de cualquier
lenguaje de programacin, y en especial de JavaScript.

El lenguaje que vas a estudiar ahora se llama JavaScript, pero quizs habrs odo otros nombres que
te resulten similares como JScript (que es el nombre que le dio Microsoft a este lenguaje).
Microsoft le dio el nombre de JScript para evitar problemas relacionados con la marca, pero no pudo
evitar otros problemas surgidos por las incompatibilidades que su versin de JavaScript tena con
mltiples navegadores. Para evitar esas incompatibilidades, el W3C, dise el DOM (Modelo de
Objetos del Documento), que incorporaron las versiones de Internet Explorer 6, Netscape Navigator,
Opera 7 y Mozilla Firefox desde su primera versin.

A partir de 1997 este lenguaje se rige por un estndar denominado ECMA, que se encarga de
gestionar las especificaciones de este lenguaje de script (da igual el nombre que reciba). En el
documentoECMA-262 es dnde se detallan dichas especificaciones. Tanto JavaScript como JScript
son compatibles con el estndar ECMA-262.
JavaScript se dise con una sintaxis similar al lenguaje C y aunque adopta nombres y convenciones
del lenguaje Java, ste ltimo no tiene relacin con JavaScript ya que tienen semnticas y propsitos
diferentes.

JavaScript fue desarrollado originariamente por Brendan Eich, de Netscape, con el nombre de
Mocha, el cual se renombr posteriormente a LiveScript y qued finalmente como JavaScript.

Hoy en da JavaScript es una marca registrada de Oracle Corporation, y es usado con licencia por los
productos creados por Netscape Communications y entidades actuales, como la fundacinMozilla.

Ms informacin sobre Brendan Eich. http://es.wikipedia.org/wiki/Brendan_Eich

Quin invent JavaScript:
Microsoft.
Oracle Corporation.
Brendan Eich.
El nombre original fue Mocha, luego LiveScript, para pasar a ser finalmente JavaScript.

-1-
Diseo Web en Entorno Cliente DAW

1.1.- Comentarios en el cdigo.

A la hora de programar en cualquier lenguaje de programacin, es muy importante que comentes tu
cdigo.

Los comentarios son sentencias que el intrprete de JavaScript ignora. Sin embargo estas sentencias
permiten a los desarrolladores dejar notas sobre cmo funcionan las cosas en sus scripts.

Los comentarios ocupan espacio dentro de tu cdigo de JavaScript, por lo que cuando alguien se
descargue vuestro cdigo necesitar ms o menos tiempo, dependiendo del tamao de vuestro
fichero. Aunque sto pueda ser un problema, es muy recomendable el que documentes tu cdigo lo
mximo posible, ya que esto te proporcionar muchas ms ventajas que inconvenientes.

JavaScript permite dos estilos de comentarios. Un estilo consiste en dos barras inclinadas hacia la
derecha (sin espacios entre ellas), y es muy til para comentar una lnea sencilla. JavaScript ignorar
cualquier carcter a la derecha de esas barras inclinadas en la misma lnea, incluso si aparecen en el
medio de una lnea.

Ejemplos de comentarios de una nica lnea:

// Este es un comentario de una lnea
var nombre="Marta" // Otro comentario sobre esta lnea
// Podemos dejar por ejemplo
//
// una lnea en medio en blanco

Para comentarios ms largos, por ejemplo de una seccin del documento, podemos emplear en lugar
de las dos barras inclinadas el /* para comenzar la seccin de comentarios, y */ para cerrar la
seccin de comentarios.

Por ejemplo:
/* sta es una seccin
de comentarios
en el cdigo de JavaScript */
O tambin:
/* ----------------------------------
funcin imprimir()
Imprime el listado de alumnos en orden alfabtico
-------------------------------------*/
function imprimir()
{
// Lneas de cdigo JavaScript
}

Sabas que usando comentarios podemos desactivar un bloque de cdigo para que JavaScript deje
de ejecutarlo sin tener que borrar nada en el cdigo?
Sabas adems, que los comentarios en JavaScript son muy tiles para dejar por ejemplo tu
informacin de contacto para que otros programadores contacten contigo?

Ms informacin y ejemplos sobre comentarios en JavaScript.

http://www.htmlpoint.com/javascript/corso/js_07.htm

1.2.- Variables.
La forma ms conveniente de trabajar con datos en un script, es asignando primeramente los datos a
una variable. Es incluso ms fcil pensar que una variable es un cajn que almacena informacin. El
tiempo que dicha informacin permanecer almacenada, depender de muchos factores. En el
momento que el navegador limpia la ventana o marco, cualquier variable conocida ser eliminada.

-2-
Diseo de Aplicaciones Web Tema 4
Dispones de dos maneras de crear variables en JavaScript: una forma es usar la palabra reservada var
seguida del nombre de la variable. Por ejemplo, para declarar una variable edad, el cdigo de
JavaScript ser:
var edad;

Otra forma consiste en crear la variable, y asignarle un valor directamente durante la creacin:
var edad = 38;

o bien, podramos hacer:

var edad;
edad = 38; // Ya que no estamos obligados a declarar la variable pero es una buena prctica el
hacerlo.
var altura, peso, edad: // Para declarar ms de una variable en la misma lnea.

La palabra reservada var se usa para la declaracin o inicializacin de la variable en el documento.

Una variable de JavaScript podr almacenar diferentes tipos de valores, y una de las ventajas que
tenemos con JavaScript es que no tendremos que decirle de qu tipo es una variable u otra.

A la hora de dar nombres a las variables, tendremos que poner nombres que realmente describan el
contenido de la variable. No podremos usar palabras reservadas, ni smbolos de puntuacin en el
medio de la variable, ni la variable podr contener espacios en blanco. Los nombres de las variables
han de construirse con caracteres alfanumricos y el carcter subrayado ( _ ). No podremos utilizar
caracteres raros como el signo + , un espacio , % , $ , etc. en los nombres de variables, y estos nombres
no podrn comenzar con un nmero.

Si queremos nombrar variables con dos palabras, tendremos que separarlas con el smbolo "_" o bien
diferenciando las palabras con una mayscula, por ejemplo:
var mi_peso;
var miPeso; // Esta opcin es ms recomendable, ya que es ms cmoda de escribir.

Deberemos tener cuidado tambin en no utilizar nombres reservados como variables. Por ejemplo,
no podremos llamar a nuestra variable con el nombre de return o for .

Ms informacin y ejemplos de Variables. http://www.w3schools.com/js/js_variables.asp

"La conciencia es la ms variable de todas las reglas."

de VAUVENARGUES, Luc de Clapiers.

1.3.- Tipos de datos.

Las variables en JavaScript podrn contener cualquier tipo de dato. A continuacin, se muestran los
tipos de datos soportados en JavaScript:
Tipos de datos soportados por JavaScript
Tipo Ejemplo Descripcin
Cadena. "Hola mundo" Una serie de caracteres dentro de comillas dobles.
Nmero. 9.45 Un nmero sin comillas dobles.
Boolean. true. Un valor verdadero o falso.
Null. null. Desprovisto de contenido, simplemente es un valor null.
Object. Es un objeto software que se define por sus propiedades y mtodos
(los arrays tambin son objetos).
Function. La definicin de una funcin.

El contener solamente este tipo de datos, simplifica mucho las tareas de programacin,
especialmente aquellas que abarcan tipos incompatibles entre nmeros.

-3-
Diseo Web en Entorno Cliente DAW

"Duda siempre de ti mismo, hasta que los datos no dejen lugar a dudas."
de BACH, Richard.

A continuacin te presentamos un vdeo sobre tipos de datos en JavaScript.

http://www.youtube.com/watch?feature=player_embedded&v=cw5sFqlDBtE#!
Resumen: Vamos a ver dos artculos uno de ellos ms genrico y otro ms especfico sobre los tipos
de datos. Abrimos el editor web Komodo y creamos un directorio, en el cul crearemos un archivo
ejemplos-tipos-datos.html . Abrimos el cdigo de JavaScript con <script lenguaje=javascript> y
</script> . Primero hablaremos de los tipos de datos numricos, los cuales no se diferencian en
JavaScript. Es indiferente que se usen nmeros reales o nmeros enteros. Para JavaScript siempre
sern tipos de datos numricos. Creamos 4 variables que almacenan diferentes ejemplos de
nmeros. Para crear variables numricas tambin se puede utilizar notacin cientfica. Para ello
usamos un exponente (que se define con una letra "e"), seguido a continuacin del exponente al cual
est elevado. Tambin podremos crear nmeros en bases diferentes (base 8, base 16). Para crear un
nmero en base 8 comenzamos con un 0 seguido de nmeros del 0 al 7. Para los nmeros
hexadecimal se pone un 0 seguido de una "x" y cualquier carcter hexadecimal (del 0 al 9 y de la A a
la F).

Para crear variables de tipo cadena, simplemente tenemos que poner el texto entre comillas. Si
tenemos una cadena que slo contiene caracteres numricos, para JavaScript eso ser una cadena,
independientemente del contenido que tenga. Dentro de las cadenas podemos usar caracteres de
escape (como saltos de lnea con \n , comillas dobles \ , tabuladores \t , etc.). Cuando sumamos
cadenas en JavaScript lo que hacemos es concatenar esas cadenas (poner una a continuacin de la
otra).

Los tipos de datos booleano, son un true o un false . Y se usan mucho para tomar decisiones. Los
nicos valores que podemos poner en las variables booleanas son true y false . Se muestra un
ejemplo de uso de una variable booleana dentro de una sentencia if , modificando la comparacin
usando == y === .

Existen otros tipos de datos especiales que son de tipo Objeto, por ejemplo los arrays . Un array es
una variable con un montn de casillas a las que se accede a travs de un ndice.

El programa final quedar as:

<script lenguaje=javascript>
// tipo de datos numricos
// pueden ser enteros o nmeros con decimales
var miEntero = 33;
var miDecimales = 2.5;
var comaFlotante = 2344.983338;
var numeral = 0.573;
// pueden tener notacin cientfica
var numCientifico = 2.9e3;
var otroNumCientifico = 2e-3;
//alert(otroNumCientifico);
// podemos escribir nmeros en otras bases
var numBase10 = 2200;
var numBase8 = 0234;
var numBase16 = 0x2A9F;
//alert(numBase16);
// tipo de datos cadena de caracteres
var miCadena = Hola! esto es una cadena!;
var otraCadena = 2323232323; // parece un numrico pero es una cadena
// caracteres de escape en cadenas
var cadenaConSaltoDeLinea = linea1\nLnea2\nLnea3;
var cadenaConComillas = cadena con comillas \comillas dobles\;
var cadenaNum = 11;
var sumaCadenaConcatenacion = otraCadena + cadenaNum;
//alert(sumaCadenaConcatenacion);
// tipos de datos booleano

-4-
Diseo de Aplicaciones Web Tema 4
var miBooleano = true;
var falso = false;
if (niBooleano){
//alert (era true);
}else{
//alert(era false);
}
var booleano = (23===23);
//alerts(booleano)

//esos eran los tipos de datos principales

//pero existen otros tipos especiales que veremos ms adelante
//arrays
var miArray = (2,5,7);
//objetos
var miObjeto = {
propiedad: 23,
otracosa: hola
}

//operador typeof para conocer un tipo

alert(El tipo de miEntero es: + typeof(miEntero));
alert(El tipo de miCadena es: + typeof(miCadena));
alert(El tipo de miEntero es: + typeof(miBooleano));
alert(El tipo de miEntero es: + typeof(miArray));
alert(El tipo de miEntero es: + typeof(miObjeto));
</script>

1.3.1.- Conversiones de tipos de datos.

Aunque los tipos de datos en JavaScript son muy sencillos, a veces te podrs encontrar con casos en
los que las operaciones no se realizan correctamente, y eso es debido a la conversin de tipos de
datos. JavaScript intenta realizar la mejor conversin cuando realiza esas operaciones, pero a veces
no es el tipo de conversin que a ti te interesara.

Por ejemplo cuando intentamos sumar dos nmeros:

4 + 5 // resultado = 9

Si uno de esos nmeros est en formato de cadena de texto, JavaScript lo que har es intentar
convertir el otro nmero a una cadena y los concatenar, por ejemplo:
4 + "5" // resultado = "45"

Otro ejemplo podra ser:

4 + 5 + "6" // resultado = "96"
Esto puede resultar ilgico pero s que tiene su lgica. La expresin se evala de izquierda a derecha.
La primera operacin funciona correctamente devolviendo el valor de 9 pero al intentar sumarle una
cadena de texto "6" JavaScript lo que hace es convertir ese nmero a una cadena de texto y se lo
concatenar al comienzo del "6".

Para convertir cadenas a nmeros dispones de las funciones: parseInt() y parseFloat() .

Por ejemplo:
parseInt("34") // resultado = 34
parseInt("89.76") // resultado = 89

parseFloat devolver un entero o un nmero real segn el caso:

parseFloat("34") // resultado = 34
parseFloat("89.76") // resultado = 89.76

4 + 5 + parseInt("6") // resultado = 15

-5-
Diseo Web en Entorno Cliente DAW

Si lo que deseas es realizar la conversin de nmeros a cadenas, es mucho ms sencillo, ya que

simplemente tendrs que concatenar una cadena vaca al principio, y de esta forma el nmero ser
convertido a su cadena equivalente:
("" + 3400) // resultado = "3400"
("" + 3400).length // resultado = 4

En el segundo ejemplo podemos ver la gran potencia de la evaluacin de expresiones. Los parntesis
fuerzan la conversin del nmero a una cadena. Una cadena de texto en JavaScript tiene una
propiedad asociada con ella que es la longitud (length), la cul te devolver en este caso el nmero 4,
indicando que hay 4 caracteres en esa cadena "3400". La longitud de una cadena es un nmero, no
una cadena.

1.4.- Operadores.
JavaScript es un lenguaje rico en operadores: smbolos y palabras que realizan operaciones sobre uno
o varios valores, para obtener un nuevo valor.

Cualquier valor sobre el cual se realiza una accin (indicada por el operador), se denomina un
operando. Una expresin puede contener un operando y un operador (denominado operador
unario), como por ejemplo en b++ , o bien dos operandos, separados por un operador (denominado
operador binario), como por ejemplo en a + b .
Categoras de operadores en JavaScript
Tipo Qu realizan
Comparan los valores de 2 operandos, devolviendo un resultado de true o false (se
usan extensivamente en sentencias condicionales como if... else y en
Comparacin.
instrucciones loop ).
== != === !== > >= < <=
Unen dos operandos para producir un nico valor que es el resultado de una
Aritmticos. operacin aritmtica u otra operacin sobre ambos operandos.
+ - * / % ++ - - +valor -valor
Asigna el valor a la derecha de la expresin a la variable que est a la izquierda.
Asignacin. = += -= *= /= %= <<= >= >>= >>>= &= |= = []
Realizan operaciones booleanas aritmticas sobre uno o dos operandos booleanos.
Boolean. && || !
Realizan operaciones aritmticas o de desplazamiento de columna en las
Bit a Bit. representaciones binarias de dos operandos.
& | << >> >>>
Ayudan a los scripts a evaluar la herencia y capacidades de un objeto particular
Objeto. antes de que tengamos que invocar al objeto y sus propiedades o mtodos.
. [] () delete in instanceOf new this
Operadores que tienen un comportamiento especial.
Miscelneos. , ?: typeof void

Operadores. http://www.htmlpoint.com/javascript/corso/js_30.htm

1.4.1.- Operadores de comparacin.

Operadores de comparacin en JavaScript

Operadores de comparacin en JavaScript

Sintaxis Nombre Tipos de operandos Resultados
== Igualdad. Todos. Boolean.
!= Distinto. Todos. Boolean.

-6-
Diseo de Aplicaciones Web Tema 4

=== Igualdad estricta. Todos. Boolean.

!== Desigualdad estricta. Todos. Boolean.
> Mayor que . Todos. Boolean.
>= Mayor o igual que. Todos. Boolean.
< Menor que. Todos. Boolean.
<= Menor o igual que. Todos. Boolean.

En valores numricos, los resultados seran los mismos que obtendramos con clculos algebraicos.
Por ejemplo:
30 == 30 // true
30 == 30.0 // true
5 != 8 // true
9 > 13 // false
7.29 <= 7.28 // false

Tambin podramos comparar cadenas a este nivel:

"Marta" == "Marta" // true
"Marta" == "marta" // false
"Marta" > "marta" // false
"Mark" < "Marta" // true

Para poder comparar cadenas, JavaScript convierte cada carcter de la cadena de un string, en su
correspondiente valor ASCII. Cada letra, comenzando con la primera del operando de la izquierda, se
compara con su correspondiente letra en el operando de la derecha. Los valores ASCII de las letras
maysculas, son ms pequeos que sus correspondientes en minscula, por esa razn "Marta" no es
mayor que "marta". En JavaScript hay que tener muy en cuenta la sensibilidad a maysculas y
minsculas.

Si por ejemplo comparamos un nmero con su cadena correspondiente:

"123" == 123 // true

JavaScript cuando realiza esta comparacin, convierte la cadena en su nmero correspondiente y

luego realiza la comparacin. Tambin dispones de otra opcin, que consiste en convertir mediante
las funciones parseInt() o parseFloat() el operando correspondiente:
parseInt("123") == 123 // true

Los operadores === y !== comparan tanto el dato como el tipo de dato. El operador === slo
devolver true , cuando los dos operandos son del mismo tipo de datos (por ejemplo ambos son
nmeros) y tienen el mismo valor.

Operadores de Comparacin. http://www.webestilo.com/javascript/js06.phtml

1.4.2.- Operadores aritmticos.

Operadores arimticos en JavaScript

Operadores aritmticos en JavaScript

Sintaxis Nombre Tipos de Operando Resultados
+ Ms. integer, float, string. integer, float, string.
- Menos. integer, float. integer, float.
* Multiplicacin. integer, float. integer, float.
/ Divisin. integer, float. integer, float.
% Mdulo. integer, float. integer, float.
++ Incremento. integer, float. integer, float.

-7-
Diseo Web en Entorno Cliente DAW

-- Decremento. integer, float. integer, float.

+valor Positivo. integer, float, string. integer, float.
-valor Negativo. integer, float, string. integer, float.

Veamos algunos ejemplos:

var a = 10; // Inicializamos a al valor 10
var z = 0; // Inicializamos z al valor 0
z = a; // a es igual a 10, por lo tanto z es igual a 10.
z = ++a; // el valor de a se incrementa justo antes de ser asignado a z, por lo que a
es 11 y z valdr 11.
z = a++; // se asigna el valor de a (11) a z y luego se incrementa el valor de a (pasa
a ser 12).
z = a++; // a vale 12 antes de la asignacin, por lo que z es igual a 12; una vez
hecha la asignacin a valdr 13.

Otros ejemplos:
var x = 2;
var y = 8;
var z = -x; // z es igual a -2, pero x sigue siendo igual a 2.
z = - (x + y); // z es igual a -10, x es igual a 2 e y es igual a 8.
z = -x + y; // z es igual a 6, pero x sigue siendo igual a 2 e y igual a 8.

"La msica es la aritmtica de los sonidos, como la ptica es la geometra de la luz."

de DEBUSSY, Claude.

Si sumamos 9+4+"10" en JavaScript obtendremos:

"23".
23.
"1310".
Primero se sumarn 9+4 y a ese resultado 13, se le concatenar la cadena "10".

1.4.3.- Operadores de asignacin.

Operadores de asignacin en JavaScript.

Operadores de asignacin en JavaScript
Sintaxis Nombre Ejemplo Significado
= Asignacin. x=y x=y
+= Sumar un valor. x += y x=x+y
-= Substraer un valor. x -= y x=x-y
*= Multiplicar un valor. x *= y x=x*y
/= Dividir un valor. x /= y x=x/y
%= Mdulo de un valor. x %= y x=x%y
<<= Desplazar bits a la izquierda. x <<= y x = x << y
>= Desplazar bits a la derecha. x >= y x=x>y
>>= Desplazar bits a la derecha rellenando con 0. x >>= y x = x >> y
>>>= Desplazar bits a la derecha. x >>>= y x = x >>> y
&= Operacin AND bit a bit. x &= y x=x&y
|= Operacin OR bit a bit. x |= y x=x|y
^= Operacin XOR bit a bit. x=y x=xy
[]= Desestructurando asignaciones. [a,b]=[c,d] a=c, b=d

Operadores. http://www.w3schools.com/js/js_operators.asp

-8-
Diseo de Aplicaciones Web Tema 4

"Los esfuerzos, cuando se suman, se multiplican."

Annimo.

1.4.4.- Operadores booleanos.

Debido a que parte de la programacin tiene un gran componente de lgica, es por ello, que los
operadores booleanos juegan un gran papel.

Los operadores booleanos te van a permitir evaluar expresiones, devolviendo como resultado true
(verdadero) o false (falso).
Operadores de boolean en JavaScript
Sintaxis Nombre Operandos Resultados
&& AND. Boolean. Boolean.
|| OR. Boolean. Boolean.
! Not. Boolean. Boolean.

Ejemplos:
!true //
resultado = false
!(10 > 5) // resultado = false
!(10 < 5) // resultado = true
!("gato" == "pato") // resultado = true

5 > 1 && 50 > 10 // resultado = true

5 > 1 && 50 < 10 // resultado = false
5 < 1 && 50 > 10 // resultado = false
5 < 1 && 50 < 10 // resultado = false

Tabla de valores de verdad del operador AND

Operando Izquierdo Operador AND Operando Derecho Resultado
True && True True
True && False False
False && True False
False && False False

Tabla de valores de verdad del operador OR

Operando Izquierdo Operador OR Operando Derecho Resultado
True || True True
True || False True
False || True True
False || False False

Ejemplos:
5 > 1 || 50 > 10 // resultado = true
5 > 1 || 50 < 10 // resultado = true
5 < 1 || 50 > 10 // resultado = true
5 < 1 || 50 < 10 // resultado = false

1.4.5.- Operadores bit a bit.

Para los programadores de scripts, las operaciones bit a bit suelen ser un tema avanzado. A menos
que t tengas que gestionar procesos externos en aplicaciones del lado del servidor, o la conexin
con applets de Java, es raro que tengas que usar este tipo de operadores.

-9-
Diseo Web en Entorno Cliente DAW

Los operandos numricos, pueden aparecer en JavaScript en cualquiera de los tres formatos posibles
(decimal, octal o hexadecimal). Tan pronto como el operador tenga un operando, su valor se
convertir a representacin binaria (32 bits de longitud). Las tres primeras operaciones binarias bit a
bit que podemos realizar sonAND, OR y XOR y los resultados de comparar bit a bit sern:
Bit a bit AND: 1 si ambos dgitos son 1.
Bit a bit OR: 1 si cualquiera de los dos dgitos es 1.
Bit a bit XOR: 1 si slo un dgito es 1.

Tabla de operador Bit a Bit en JavaScript

Opera Operando Operando
Nombre
dor izquierdo derecho
& Desplazamiento AND. Valor integer. Valor integer.
| Desplazamiento OR. Valor integer. Valor integer.
^ Desplazamiento XOR. Valor integer. Valor integer.
Desplazamiento NOT. (Ninguno). Valor integer.
<< Desplazamiento a la izquierda. Valor integer. Cantidad a desplazar.
>> Desplazamiento a la derecha. Valor integer. Cantidad a desplazar.
Desplazamiento derecha
>>> Valor integer. Cantidad a desplazar.
rellenando con 0.

Por ejemplo:
4 << 2 // resultado = 16
La razn de este resultado es que el nmero decimal 4 en binario es 00000100. El operador << indica a
JavaScript que desplace todos los dgitos dos lugares hacia la izquierda, dando como resultado en
binario 00010000 , que convertido a decimal te dar el valor 16.

En el siguiente enlace podrs ver ejemplos de operaciones a nivel de bits:

http://www.mundoprogramacion.com/net/dotnet/operar_con_bits.aspx

1.4.6.- Operadores de objeto.

El siguiente grupo de operadores se relaciona directamente con objetos y tipos de datos. La mayor
parte de ellos fueron implementados a partir de las primeras versiones de JavaScript, por lo que
puede haber algn tipo de incompatibilidad con navegadores antiguos.

. (punto)

El operador punto, indica que el objeto a su izquierda tiene o contiene el recurso a su derecha, como
por ejemplo: objeto.propiedad y objeto.mtodo() .
Ejemplo con un objeto nativo de JavaScript:
var s = new String('rafa');
var longitud = s.length;
var pos = s.indexOf("fa"); // resultado: pos = 2

[] (corchetes para enumerar miembros de un objeto).

Por ejemplo cuando creamos un array: var a =["Santiago","Corua", "Lugo"];

Enumerar un elemento de un array: a[1] = "Corua";
Enumerar una propiedad de un objeto: a["color"]= "azul";

Delete (para eliminar un elemento de una coleccin).

Por ejemplo si consideramos:

- 10 -
Diseo de Aplicaciones Web Tema 4
var oceanos = new Array("Atlantico", "Pacifico", "Indico","Artico");

Podramos hacer:
delete oceanos[2];

sto eliminara el tercer elemento del array ("Indico"), pero la longitud del array no cambiara. Si
intentamos referenciar esa posicin oceanos[2] obtendramos undefined.

In (para inspeccionar mtodos o propiedades de un objeto).

El operando a la izquierda del operador, es una cadena referente a la propiedad o mtodo

(simplemente el nombre del mtodo sin parntesis); el operando a la derecha del operador, es el
objeto que estamos inspeccionando. Si el objeto conoce la propiedad o mtodo, la expresin
devolver true .

Ejemplo: "write" in document

o tambin "defaultView" in document

instanceof (para comprobar si un objeto es una instancia de un objeto nativo de JavaScript).

Ejemplo:
a = new Array(1,2,3);
a instanceof Array; // devolver true.
new (para acceder a los constructores de objetos incorporados en el ncleo de JavaScript).

Ejemplo:
var hoy = new Date();
// crear el objeto hoy de tipo Date() empleando el constructor por defecto de dicho objeto.
this (para hacer referencia al propio objeto en el que estamos localizados).

Ejemplo:
nombre.onchange = validateInput;
function validateInput(evt)
{
var valorDeInput = this.value;
// Este this hace referencia al objeto nombre que estamos validando.
}

1.4.7.- Operadores miscelneos.

El operador coma ,
Este operador, indica una serie de expresiones que van a ser evaluadas en secuencia, de izquierda a
derecha. La mayor parte de las veces, este operador se usa para combinar mltiples declaraciones e
inicializaciones de variables en una nica lnea.
Ejemplo:
var nombre, direccion, apellidos, edad;

Otra situacin en la que podemos usar este operador coma, es dentro de la expresin loop . En el
siguiente ejemplo inicializamos dos variables de tipo contador, y las incrementamos en diferentes
porcentajes. Cuando comienza el bucle, ambas variables se inicializan a 0 y a cada paso del bucle una
de ellas se incrementa en 1, mientras que la otra se incrementa en 10.
for (var i=0, j=0 ; i < 125; i++, j+10)
{
// ms instrucciones aqu dentro
}
Nota: no confundir la coma , con el delimitador de parmetros " ; " en la instruccin for .

- 11 -
Diseo Web en Entorno Cliente DAW

? : (operador condicional)
Este operador condicional es la forma reducida de la expresin if . else .

La sintaxis formal para este operador condicional es:

condicion ? expresin si se cumple la condicin: expresin si no se cumple;

Si usamos esta expresin con un operador de asignacin:

var = condicion ? expresin si se cumple la condicin: expresin si no se cumple;

Ejemplo:
var a,b;
a = 3; b = 5;
var h = a > b ? a : b; // a h se le asignar el valor 5;

typeof (devuelve el tipo de valor de una variable o expresin).

Este operador unario se usa para identificar cuando una variable o expresin es de alguno de los
siguientes tipos: number , string , boolean , object , function o undefined .

Ejemplo:
if (typeof miVariable == "number")
{
miVariable = parseInt(miVariable);
}

1.5.- Condiciones y bucles.

En esta seccin te mostraremos cmo los programas pueden tomar decisiones, y cmo puedes lograr
que un script repita un bloque de instrucciones las veces que quieras.
Cuando te levantas cada da tomas decisiones de alguna clase; muchas veces ni te das cuenta de ello,
pero lo ests haciendo. Por ejemplo, imagnate que vas a hacer la compra a un supermercado; desde
el momento que entras en el supermercado ya ests tomando decisiones: compro primero la leche
o compro la verdura?, ese precio es barato o es caro?, el color de ese tinte es azul claro u oscuro?,
tengo suficiente dinero para pagar o no?, me llegan estos kilogramos de patatas o no?, pago en
efectivo o tarjeta?, etc.
Es decir, tomamos innumerables decisiones a lo largo del da y la mayor parte de las veces no nos
damos ni cuenta de ello.

En las siguientes secciones, vers cmo puedes ejecutar unas u otras instrucciones, dependiendo de
ciertas condiciones, y cmo puedes repetir una o varias instrucciones, las veces que te hagan falta.

Es correcta la instruccin if (a=b) then suma=a+b;

S No
Muy bien, ya que en la condicin estamos haciendo una asignacin. Tendramos que escribir == (dos iguales seguidos), para que la
condicin pudiera ser evaluada.

"Imponer condiciones excesivamente duras es dispensar de su cumplimiento."

Annimo.

1.5.1.- Estructuras de control.

En los lenguajes de programacin, las instrucciones que te permiten controlar las decisiones y bucles
de ejecucin, se denominan "Estructuras de Control". Una estructura de control, dirige el flujo de
ejecucin a travs de una secuencia de instrucciones, basadas en decisiones simples y en otros
factores.

- 12 -
Diseo de Aplicaciones Web Tema 4
Una parte muy importante de una estructura de control es la "condicin". Cada condicin es una
expresin que se evala a true o false .

En JavaScript tenemos varias estructuras de control, para las diferentes situaciones que te puedas
encontrar durante la programacin. Tres de las estructuras de control ms comunes son:
construcciones if, construcciones if...else y los bucles .

Construccin if
La decisin ms simple que podemos tomar en un programa, es la de seguir una rama determinada si
una determinada condicin es true .
Sintaxis:
if (condicin) // entre parntesis ir la condicin que se evaluar a true o false.
{
// instrucciones a ejecutar si se cumple la condicin
}

Ejemplo:
if (miEdad >30)
{
alert("Ya eres una persona adulta");
}

Construccin if else
En este tipo de construccin, podemos gestionar que haremos cuando se cumpla y cuando no se
cumpla una determinada condicin.

Sintaxis:
if (condicin) // entre parntesis ir la condicin que se evaluar a true o false.
{
// instrucciones a ejecutar si se cumple la condicin
}
else
{
// instrucciones a ejecutar si no se cumple la condicin
}

Ejemplo:
if (miEdad >30)
{
alert("Ya eres una persona adulta.");
}
else
{
alert("Eres una persona joven.");
}

Ejemplos de if..else. http://www.gratismil.com/apuntes/javascript/21-if-else-en-javascript.htm

1.5.2.- Bucles.

Los bucles son estructuras repetitivas, que se ejecutarn un nmero de veces fijado expresamente, o
que depender de si se cumple una determinada condicin.

Bucle for.
Este tipo de bucle te deja repetir un bloque de instrucciones un nmero limitado de veces.

Sintaxis:
for (expresin inicial; condicin; incremento)
{
// Instrucciones a ejecutar dentro del bucle.

- 13 -
Diseo Web en Entorno Cliente DAW

}
Ejemplo:
for (var i=1; i<=20; i++)
{
// instrucciones que se ejecutarn 20 veces.
}

Bucle while().
Este tipo de bucles se utilizan cuando queremos repetir la ejecucin de unas sentencias un nmero
indefinido de veces, siempre que se cumpla una condicin. Es ms sencillo de comprender que el
bucle FOR , ya que no incorpora en la misma lnea la inicializacin de las variables, su condicin para
seguir ejecutndose y su actualizacin. Slo se indica, como veremos a continuacin, la condicin
que se tiene que cumplir para que se realice una iteracin o repeticin.

Sintaxis:
while (condicin)
{
// Instrucciones a ejecutar dentro del bucle.
}
Ejemplo:
var i=0;
while (i <=10)
{
// Instrucciones a ejecutar dentro del bucle hasta que i sea mayor que 10 y no se cumpla
la condicin.
i++;
}

Bucle do while().
El tipo de bucle do...while es la ltima de las estructuras para implementar repeticiones de las que
dispone JavaScript, y es una variacin del bucle while() visto anteriormente. Se utiliza generalmente,
cuando no sabemos el nmero de veces que se habr de ejecutar el bucle. Es prcticamente igual
que el bucle while() , con la diferencia, de que sabemos seguro que el bucle por lo menos se
ejecutar una vez.

Sintaxis:
do {
// Instrucciones a ejecutar dentro del bucle.
}while (condicin);

Ejemplo:
var a = 1;
do{
alert("El valor de a es: "+a); // Mostrar esta alerta 2 veces.
a++;
}while (a<3);

1.5.3.- Ejemplo sencillo con JavaScript.

Aqu se muestra el cdigo fuente, de un pequeo ejemplo de una aplicacin en JavaScript.

Simplemente copia el cdigo, pgalo en tu editor favorito y guarda el archivo con la extensin .html
Para probar la aplicacin haz doble click en el fichero .html y visualzalo con tu navegador.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Bsico de JavaScript</title>

- 14 -
Diseo de Aplicaciones Web Tema 4
</head>
<body>
<h2>Cdigo fuente de un ejemplo bsico con JavaScript
</h2>
<script type="text/javascript">
// Definimos variables.
var nombre, apellidos, edad, hermanos;

nombre="Rafa";
apellidos="Martinez Daz";
edad=38;
hermanos=3;

// Imprimo el nombre y los apellidos.

document.write("Hola " + nombre + " " + apellidos);

// Imprimo un salto de lnea.

document.write("<br/>");

// Imprime la edad y el nmero de hermanos.

document.write(nombre + " tienes " + edad + " aos y adems tienes " + hermanos + "
hermanos.<br/>");

// Fjate en la diferencia entre las dos siguientes lineas.

document.write("Dentro de 15 aos tu edad ser " + edad + 15 + ".<br/>");
document.write("Dentro de 15 aos tu edad ser " + (edad+15) + ".<br/>");

// Tu nombre escrito 50 veces.

for (i=1; i<=50; i++)
{
document.write(nombre + ",");
}
</script>
</body>
</html>

Informacin y ejemplos sobre JavaScript. http://www.w3schools.com/js/default.asp

- 15 -