Operadores
Los operadores se usan para ejecutar una acción.
Forma Abreviada de los Operadores
Operador: x + = 1;
Equivalente x = x + 1;
Operador: x - = 1;
Equivalente x = x - 1;
Operador Asignar (=)
El operador asignar (=) se usa para asignar un valor a una variable.
En el Código 19, en la variable x, se le asigna el valor de 3 (tres) con el operador asignar (=).
Copiar enlace:
Pegar enlace en la url del explorador web y descarga el archivo:
Código 19: Operador Asignar (=)
<!-- Archivo: codigo019.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 3;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
Operadores Aritméticos
Los símbolos de los operadores aritméticos que se usan:
1. Sumar: +
2. Restar: -
3. Multiplicar: *
4. Dividir: /
Operador Sumar (+)
El operador sumar (+), suma dos variables con valores numéricos.
En el Código_20, en la variable suma, suma los valores de la variable x1 y la variable x2 con el operador sumar (+).
Código 20: Operador Sumar (+)
<!-- Archivo: codigo020.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x1 = 4;
var x2 = 3;
var suma = x1 + x2;
// Mensajes
alert(x1 + " + " + x2 + " = " + suma);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo020.html
En la Figura 17, la variable suma da como resultado 7.
Operador Resta (-)
El operador restar (-), resta dos variables con valores numéricos.
En el Código 21, en la variable diferencia, resta los valores de la variable x1 y la variable x2 con el operador restar (-).
Código 21: Operador Restar (-)
<!-- Archivo: codigo021.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x1 = 4;
var x2 = 3;
var diferencia = x1 - x2;
// Mensaje
alert(diferencia);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo021.html
En la Figura 18, la variable diferencia da como resultado 1.
Operador Multiplicar (*)
El operador multiplicar (*), multiplica dos variables con valores numéricos.
En el Código 22, en la variable producto, multiplica los valores de la variable x1 y la variable x2 con el operador multiplicar (*).
Código 22: Operador Multiplicar (*)
<!-- Archivo: codigo022.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x1 = 4;
var x2 = 3;
var producto = x1 * x2;
// Mensaje
alert(producto);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo022.html
En la Figura 19, la variable producto da como resultado 12.
Código 22: Operador Multiplicar (*)
Operador Dividir (/)
El operador dividir (/), divide dos variables con valores numéricos.
En el Código 23, en la variable cociente, divide los valores de la variable x1 y la variable x2 con el operador dividir (/).
Código 23: Operador Dividir (/)
<!-- Archivo: codigo023.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x1 = 4;
var x2 = 3;
var cociente = x1 / x2;
// Mensaje
alert(cociente);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo023.html
En la Figura 20, la variable cociente da como resultado 1.3333.
Código 23: Operador Dividir (/)
Operador Concatenar (+)
El operador concatenar (+), se usa para unir dos variables de cadenas de caracteres (string).
En el Código 24, en la variable nombre_completo, concatena los valores de la variable nombre y la variable apellido con el operador concatenar (+).
Código 24: Operador Concatenar (+)
<!-- Archivo: codigo024.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var nombre = "Ana";
var apellido = "Mora";
var nombre_completo = nombre + " " + apellido;
// Mensaje
alert(nombre_completo);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo024.html
En la Figura 21, la variable nombre_completo da como resultado “Ana Mora”.
Código 24: Operador Concatenar (+)
En el Código 25, de otra forma de concatenar variables strings.
Código 25: Concatenar Variables Strings
<!-- Archivo: codigo025.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var texto = "Lorem ";
var texto1 = "ipsum";
var texto += texto1;
// Mensaje
alert(texto);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo025.html
En la Figura 22, las variable texto da como resultado “Lorem ipsum”.
Código 25: Concatenar Variables Strings
Operador de Comparación (==)
El operador de comparación (==), se usa para comparar dos variables.
En el Código 26, en la variable x3, se comparan los valores de la variable x1 y la variable x2 con el operador de comparación (==) devuelve verdadero (true) porque x1 y x2 son verdaderos.
Código 26: Operador de Comparación (==)
<!-- Archivo: codigo026.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x1 = 1;
var x2 = 1;
var x3 = (x1 == x2);
// Mensaje
alert(x3);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo026.html
En el Figura 23, en la variable x3 da como resultado verdadero (true).
Código 26: Operador de Comparación (==)
Operador Exponenciación (**)
El operador exponenciación (**), se usa cuando en la multiplicación se repite el mismo número.
En el Código 27, en la variable x, el 2 (dos) se eleva al 3 (tres) usando el operador exponenciacion (**) da el resulatdo 8 (ocho).
Código 27: Operador Exponenciación (**)
<!-- Archivo: codigo027.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 2 ** 3;
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo027.html
En la Figura 24, la variable x da como resultado 8.
Código 27: Operador Exponenciación (**)
Operador Resto (%)
El operador resto (%) retorna el resto de la división del primer operando con el segundo operando.
En el Código 28, en la variable x, el resto entre 5 (cinco) y 2 (dos) usando el operador resto (%) da el resulatdo 1 (uno).
Código 28: Operador Resto (%)
<!-- Archivo: codigo028.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 5 % 2;
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo028.html
En la Figura 25, el resto de la división de 5 entre 2 da como resultado 1, la variable x es igual a 1.
Código 28: Operador Resto (%)
Operador Incrementar (++)
El operador incrementar (++) agrega 1 al valor de una variable.
En el Código 29, en la variable x, su valor es 1 y se incrementa en 1 dando el resultado de 2 usando el operador incrementar (++).
Código 29: Operador Incrementar (++)
<!-- Archivo: codigo029.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 1;
// El valor de x más 1
x++
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo029.html
En la Figura 26, la variable x es igual a 2.
Código 29: Operador Incrementar (++)
Operador Decrementar (--)
El operador decrementar (--) resta 1 al valor de una variable.
En el Código 30, en la variable x, su valor es 2 y se decrementa en 1 dando el resultado de 1 usando el operador decrementar (--).
Código 30: Operador Decrementar (--)
<!-- Archivo: codigo030.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 2;
// El valor de x menos 1
x--
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo030.html
En la Figura 27, la variable x es igual a 1.
Figura 27 – Vista en el explorador Web
Código 30: Operador Decrementar (--)
Operadores de Comparación
El operador de comparación compara dos valores (strings, numbers, booleans u objects) y retorna un valor verdadero (true) o falso (false).
Operador Igual (==)
El operador igual (==) retorna verdadero (true) si los valores son iguales, de lo contrario retorna falso (false).
En el Código_31, en la variable x, se hace la comparación, si 2 y 2 son iguales, el valor de x es verdadero (true).
Código 31: Operador Igual (==)
<!-- Archivo: codigo031.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (2 == 2);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo031.html
En la Figura 28, la variable x da como resultado verdadero (true) porque los valores son iguales (2 == 2).
Código 31: Operador Igual (==)
En el Código_32, en la variable x, se hace la comparación, si 2 y 4 son diferentes, el valor de x es falso (false).
Código 32: Operador Igual (==)
<!-- Archivo: codigo032.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (2 == 4);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo032.html
En la Figura 29, la variable x da como resultado falso (false) porque los valores son diferentes (2 == 4).
Código 32: Operador Igual (==)
Operador Diferente (!=)
El operador igual (!=) retorna verdadero (true) si los valores son diferentes.
En el Código_33, en la variable x, se hace la comparación, si 2 y 3 son diferentes, el valor de x es verdadero (true).
Código 33: Operador Diferente (!=)
<!-- Archivo: codigo033.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (2 != 3);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo033.html
En la Figura 30, la variable x da como resultado verdadero (true) porque los valores son diferentes (2 != 2).
Código 33: Operador Diferente (!=)
En el Código_34, en la variable x, se hace la comparación, si 2 y 2 son iguales, el valor de x es falso (false).
Código 34: Operador Diferente (!=)
<!-- Archivo: codigo034.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (2 != 2);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo034.html
En la Figura 31, la variable x da como resultado falso (false) porque los valores son iguales.
Código 34: Operador Diferente (!=)
Operador Mayor Que (>)
En el Código_35, en la variable x, se hace la comparación, si 5 y 2 son iguales o 5 es mayor, el valor de x es verdadero (true) porque 5 es mayor que 2.
Código 35: Operador Mayor Que (>)
<!-- Archivo: codigo035.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (5 >= 2);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo035.html
En la Figura 32, la variable x da como resultado verdadero (true) porque 5 es mayor que 2.
Código 35: Operador Mayor Que (>)
Operador Mayor o Igual Que (>=)
En el Código_36, en la variable x, se hace la comparación, si 5 y 5 son iguales o 5 es mayor, el valor de x es verdadero (true) porque 5 es igual que 5.
Código 36: Operador Mayor o Igual Que (>=)
<!-- Archivo: codigo036.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (5 >= 5);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo036.html
En la Figura 33, la variable x da como resultado verdadero (true) porque 5 es igual a 5.
Código 36: Operador Mayor o Igual Que (>=)
Operador Menor Que (<)
En el Código_37, en la variable x, se hace la comparación, si 2 es menor que 5, el valor de x es verdadero (true) porque 2 es menor que 5.
Código 37: Operador Menor Que (<)
<!-- Archivo: codigo037.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (2 < 5);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo037.html
En la Figura 34, la variable x da como resultado verdadero (true) porque 2 es menor que 5.
Código 37: Operador Menor Que (<)
Operador Menor o Igual Que (<=)
En el Código_38, en la variable x, se hace la comparación, si 5 es menor o igual que 2, el valor de x es falso (false) porque 5 no es menor que 2.
Código 38: Operador Menor o Igual Que (<=)
<!-- Archivo: codigo038.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = (5 <= 2);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo038.html
En la Figura 35, la variable x da como resultado falso (false) porque 5 no es menor que 2.
Código 38: Operador Menor o Igual Que (<=)
Operadores Lógicos
Los operadores lógicos al hacer una comparación devuelve un valor verdadero (true) o falso (false).
Operador Lógico AND (&&)
El operador Lógico AND retorna verdadero (true), si los dos operandos es igual.
En el Código_39, en la variable y, se hace la comparación de x, x es menor que 5 y (&&) x es mayor que 2, la variable y retorna verdadero (true) porque x es igual a 3.
Código 39: Operador Lógico AND (&&)
<!-- Archivo: codigo039.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x = 3;
var y = (x < 5 && x > 2);
// Mensaje
alert(y);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo039.html
En la Figura 36, la variable y da como resultado verdadero (true) porque la variable x es menor que 5 y mayor que 2.
Código 39: Operador Lógico AND (&&)
Operador Lógico OR (ǀǀ)
El operador Lógico OR (ǀǀ) retorna verdadero (true), si uno de los operandos es igual.
En el Código_40, en la variable y, se hace la comparación de x, x es igual que 2 o (OR) x es igual que 3, la variable y retorna verdadero (true) porque x es igual a 2.
Código 40: Operador Lógico OR (ǀǀ)
<!-- Archivo: codigo040.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variables
var x = 2;
var y = ( x == 2 ǀǀ x == 3);
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo040.html
En la Figura 37, la variable y da como resultado verdadero (true) porque la variable x es igual que 2, cumple con uno de los operandos.
Código 40: Operador Lógico OR (ǀǀ)
Operador Lógico NOT (!)
El operador Lógico NOT (!) retorna falso (false), si el operando es verdadero (true) o retorna verdadero (true), si el operando es falso (false).
En el Código_41, en la variable y, se hace la comparación de x, x es igual que 2, la variable y retorna falso (false) porque x es igual a 2.
Código 41: Operador Lógico NOT (!)
<!-- Archivo: codigo041.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 2;
var y = !(x == 2);
// Mensaje
alert(y);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo041.html
En la Figura 38, la variable y da como resultado falso (false) porque la variable x es igual que 2, es verdadero pero el operador NOT (!) lo cambia a falso (false).
Código 41: Operador Lógico NOT (!)
Uso del Operador AND (&&) con la Declaración if
El uso del operador AND (&&) con la declaración if para condiciones.
En el Código_42, en el if, se hace la comparación de x, x es igual que 5 y x es mayor que 4, la comparación es verdadero (true) y el if permite ejecutar el código dentro del if.
Código 42: Uso del Operador AND (&&) con la Declaración if
<!-- Archivo: codigo042.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var x = 5;
// Condición
if (x == 5 && x > 4) {
// Mensaje
document.write("La condición es verdadera");
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo042.html
En la Figura 39, la condición if es verdadera porque la variable x es igual a 5 y mayor que 4.
Código 42: Uso del Operador AND (&&) con la Declaración if
El Operador Condicional Ternario
El operador condicional ternario tiene tres operandos: condición ? valor1 : valor2, si la condición es verdadero (true), el operador retorna el valor1, de lo contrario retorna valor2.
En el Código_43, la variable acumulado es mayor que 75, por lo que la condición es verdadera (true) entonces la variable resultado tendrá el texto Aprobado.
Código 43: El Operador Condicional Ternario
<!-- Archivo: codigo043.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable
var acumulado = 80;
// Condición
var resultado = (acumulado > 75) ? "Aprobado" : "Reprobado";
// Mensaje
alert(resultado);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo043.html
En la Figura 40, la condición es verdadero (true) porque la variable acumulado es mayor que 75 entonces el valor de la variable resultado es Aprobado.
Código 43: El Operador Condicional Ternario
Comentarios
Publicar un comentario