3.2.7 - Operadores (Relacionales)

Operadores Relacionales

Los operadores relacionales definidos por JavaScript son idénticos a los que definen las matemáticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=).

Los operadores que relacionan variables son imprescindibles para realizar cualquier aplicación compleja. El resultado de todos estos operadores siempre es un valor booleano:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true
 
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false

Los operadores relacionales también se pueden utilizar con variables de tipo cadena de texto:

var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adios";
 
resultado = texto1 == texto3; // resultado = false
resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false

3.2.6 - Operadores (Matemáticos)

Matemáticos

JavaScript permite realizar manipulaciones matemáticas sobre el valor de las variables numéricas. Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/).

var numero1 = 10;
var numero2 = 5;
 
resultado = numero1 / numero2;  // resultado = 2
resultado = 3 + numero1;        // resultado = 13
resultado = numero2 – 4;        // resultado = 1
resultado = numero1 * numero 2; // resultado = 50

Además de los cuatro operadores básicos, JavaScript define el operador "módulo", que calcula el resto de la división entera de dos números. 

El operador módulo en JavaScript se indica mediante el símbolo %, que no debe confundirse con el cálculo del porcentaje:

var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
 
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4

Los operadores matemáticos también se pueden combinar con el operador de asignación para abreviar su notación:

var numero1 = 5;
numero1 += 3;  // numero1 = numero1 + 3 = 8
numero1 -= 1;  // numero1 = numero1 - 1 = 4
numero1 *= 2;   // numero1 = numero1 * 2 = 10
numero1 /= 5;   // numero1 = numero1 / 5 = 1
numero1 %= 4;   // numero1 = numero1 % 4 = 1

3.2.5 - Revisión JavaScript (Operadores)

Operadores

Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables.

Asignación

Este operador se utiliza para guardar un valor específico en una variable. El símbolo utilizado es = 

var numero1 = 3;

A la izquierda del operador, siempre debe indicarse el nombre de una variable. A la derecha del operador, se pueden indicar variables, valores, condiciones lógicas, etc.

Incremento y decremento

Estos dos operadores solamente son válidos para las variables numéricas y se utilizan para incrementar o decrementar en una unidad el valor de una variable.

El operador de incremento se indica mediante el prefijo o sufijo ++ en el nombre de la variable. El resultado es que el valor de esa variable se incrementa en una unidad.

Ejemplo:

var numero = 5;
++numero;

es equivalente a:

var numero = 5;
numero = numero + 1;

Lógicos

Los operadores lógicos son imprescindibles para realizar aplicaciones complejas, ya que se utilizan para tomar decisiones sobre las instrucciones que debería ejecutar el programa en función de ciertas condiciones.

El resultado de cualquier operación que utilice operadores lógicos siempre es un valor lógico o booleano.

Negación


Se utiliza para obtener el valor contrario al valor de la variable:

var visible = true;
alert(!visible);  // Muestra "false" y no "true"


La negación lógica se obtiene prefijando el símbolo ! al identificador de la variable. El funcionamiento de este operador se resume en la siguiente tabla:


variable
!variable

true
false
false
true


 AND

La operación lógica AND obtiene su resultado combinando dos valores booleanos. El operador se indica mediante el símbolo && y su resultado solamente es true si los dos operandos son true:


variable1
variable2
variable1 && variable2

true
true
true
true
false
false
false
true
false
false
false
false


OR

La operación lógica OR también combina dos valores booleanos. El operador se indica mediante el símbolo || y su resultado es true si alguno de los dos operandos es true:


variable1
variable2
variable1 || variable2

true
true
true
true
false
true
false
true
true
false
false
false

3.2.4 - Revisión JavaScript (Variables)

Variables

Las variables en JavaScript se crean mediante la palabra reservada var. En JavaScript no es obligatorio inicializar las variables ni tampoco es necesario declarar las variables.

A pesar de eso, se recomienda declarar todas las variables que se vayan a utilizar.

El nombre de una variable también se conoce como identificador y debe cumplir las siguientes normas:

• Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo).
• El primer carácter no puede ser un número.

Por tanto, las siguientes variables tienen nombres correctos:

var $numero1;
var _$letra;
var $$$otroNumero;
var $_a__$4;

Sin embargo, las siguientes variables tienen identificadores incorrectos:

var 1numero;       // Empieza por un número
var numero;1_123;  // Contiene un carácter ";"

Tipos de variables

Todas las variables de JavaScript se crean de la misma forma y no es necesario declarar el tipo de variable al momento de su declaración.

Numéricas

Se utilizan para almacenar valores numéricos enteros (llamados integer ) o decimales (llamados float ).

Cadenas de texto

Se utilizan para almacenar caracteres, palabras y/o frases de texto.

Si por ejemplo el propio texto contiene comillas simples o dobles, la estrategia que se sigue es la de encerrar el texto con las comillas (simples o dobles) que no utilice el texto:

/* El contenido de texto1 tiene comillas simples, por lo que
    se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
 
/* El contenido de texto2 tiene comillas dobles, por lo que
    se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';

En los casos de caracteres especiales se deberá sustituir el carácter problemático por una combinación simple de caracteres.


Si se quiere incluir...
Se debe incluir...

Una nueva línea
\n
Un tabulador
\t
Una comilla simple
\'
Una comilla doble
\"
Una barra inclinada
\\


Arrays

En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante, el término array es el más utilizado.

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente.


Booleanos

Las variables de tipo boolean o booleano también se conocen con el nombre de variables de tipo lógico. Su funcionamiento básico es muy sencillo.

Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos valores: true (verdadero) o false (falso)

3.4.13 - Ejercicio 11

Ejercicio 11 - Eventos del mouse y el teclado

Tomando como base el siguiente archivo HTML:

<!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=iso-8859-1" />
<title>Ejercicio 11 - Información sobre eventos</title>

<style type="text/css">
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>

<script type="text/javascript">
function muestraInformacion(mensaje) {
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
}
}
</script>
</head>

<body>

<div id="info"></div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>
</html>

Completar el código JavaScript para que:

1. Al mover el mouse en cualquier punto de la ventana del navegador, se muestre la posición del puntero respecto del navegador y respecto de la página:
   
   

   Figura 1 Información que se muestra para los eventos del mouse
   Para mostrar los mensajes, utilizar la función muestraInformacion().
2. Al pulsar cualquier tecla, el mensaje mostrado debe cambiar para indicar el nuevo evento y su información asociada:
   
   

   Figura 2 Información que se muestra para los eventos del teclado
3. Añadir la siguiente característica al script: cuando se pulsa un botón del mouse, el color de fondo del cuadro de mensaje debe ser amarillo (#FFFFCC) y cuando se pulsa una tecla, el color de fondo debe ser azul (#CCE6FF). Al volver a mover el mouse, el color de fondo vuelve a ser blanco.
   
   

   Figura 3 El color de fondo del cuadro de información cambia en función del tipo de evento

3.1 - Agenda sesión 3

Sesión #3 - Agenda

1 - Resumen de la Jornada 2 (20')
2 - Revisión general JavaScript (10')
3 - JavaScript DOM y Eventos (60')
4 - Ejercicios JavaScript (30')
Break (15')
4bis - Ejercicios JavaScript (30')
5 - Primer aplicación SharePoint (60')

3.3.5.4 - Información sobre los eventos del mouse

Información sobre los eventos del mouse

La información más relevante sobre los eventos relacionados con el mouse es la de las coordenadas de la posición del puntero del mouse. Aunque el origen de las coordenadas siempre se encuentra en la esquina superior izquierda, el punto que se toma como referencia de las coordenadas puede variar.

De esta forma, es posible obtener la posición del mouse respecto de la pantalla de la computadora, respecto de la ventana del navegador y respecto de la propia página HTML (que se utiliza cuando el usuario ha hecho scroll sobre la página). Las coordenadas más sencillas son las que se refieren a la posición del puntero respecto de la ventana del navegador, que se obtienen mediante las propiedades clientX y clientY:

function muestraInformacion(elEvento) {
  var evento = elEvento || window.event;
  var coordenadaX = evento.clientX;
  var coordenadaY = evento.clientY;
  alert("Has pulsado el mouse en la posición: " + coordenadaX + ", " + coordenadaY);
}
 
document.onclick = muestraInformacion;

Las coordenadas de la posición del puntero del mouse respecto de la pantalla completa del ordenador del usuario se obtienen de la misma forma, mediante las propiedades screenX y screenY:

var coordenadaX = evento.screenX;
var coordenadaY = evento.screenY;

En muchas ocasiones, es necesario obtener otro par de coordenadas diferentes: las que corresponden a la posición del mouse respecto del origen de la página. Estas coordenadas no siempre coinciden con las coordenadas respecto del origen de la ventana del navegador, ya que el usuario puede hacer scroll sobre la página web. Internet Explorer no proporciona estas coordenadas de forma directa, mientras que el resto de navegadores sí que lo hacen. De esta forma, es necesario detectar si el navegador es de tipo Internet Explorer y en caso afirmativo realizar un cálculo sencillo:

// Detectar si el navegador es Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
 
if(ie) {
  coordenadaX = evento.clientX + document.body.scrollLeft;
  coordenadaY = evento.clientY + document.body.scrollTop;
}
else {
  coordenadaX = evento.pageX;
  coordenadaY = evento.pageY;
}
alert("Has pulsado el mouse en la posición: " + coordenadaX + ", " + coordenadaY + " respecto de la página web");

La variable ie vale true si el navegador en el que se ejecuta el script es de tipo Internet Explorer (cualquier versión) y vale false en otro caso. Para el resto de navegadores, las coordenadas respecto del origen de la página se obtienen mediante las propiedades pageX y pageY. En el caso de Internet Explorer, se obtienen sumando la posición respecto de la ventana del navegador (clientX, clientY) y el desplazamiento que ha sufrido la página (document.body.scrollLeft, document.body.scrollTop).