Aplicaciones web (III)
Introducción a JavaScript, a sus tipos y valores
JavaScript
Diseñado por Netscape en 1995 para ejecutar en un Navegador
Hoy se ha convertido en el lenguaje del Web y Internet
Norma ECMA (European Computer Manufacturers Association)
Versión soportada en navegadores actuales:
ES5: ECMAScript v5, Dic. 2009, (JavaScript 1.5)
Navegadores antiguos soportan
ES3: ECMAScript v3, Dic. 1999, (JavaScript 1.3)
Guía: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
Referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Libro: “JavaScript Pocket Reference“, D. Flanagan, O’Reilly 2012, 3rd Ed.
Tipos, objetos y valores
Tipos de JavaScript
number
Literales de números: 32, 1000, 3.8
boolean
Los literales son los valores true y false
string
Los literales de string son caracteres delimitados entre comillas o apóstrofes: “Hola, que tal”, ‘Hola, que tal’,
Internacionalización con Unicode: ‘Γεια σου, ίσως’, ‘嗨,你好吗’
undefined
undefined: representa indefinido
Objetos: agregaciones estructuradas de valores
Se agrupan en clases: Object, Array, Date, …
Objeto null: valor especial que representa objeto nulo
Operadores y expresiones
JavaScript incluye operadores de tipos y objetos. Los operadores permiten formar expresiones componiendo valores con los operadores que JavaScript evalúa hasta obtener un resultado
Por ejemplo, con las operaciones aritmeticas +, –, *, / podemos formar expresiones númericas
Expresiones con sintaxis erronea abortan la ejecución del programa
13 + 7 => 20 // Suma de números 13 - 7 => 6 // Resta de números (8*2 - 4)/3 => 4 // Expresión con paréntesis 8 / * 3 => Error_de_ejecución // Ejecución se interrumpe 8 3 => Error_de_ejecución // Ejecución se interrumpe
Sobrecarga de operadores
Algunos operadores tienen varias semánticas diferentes
Por ejemplo, el operador + tiene 3 semánticas diferentes
- Suma de enteros (operador binario)
- Signo de un número (operador unitario)
- Concatenación de strings (operador binario)
13 + 7 => 20 // Suma de números +13 => 13 // Signo de un número "Hola " + "Pepe" => "Hola Pepe" // Concatenación de strings
Conversión de tipos en expresiones
JavaScript realiza conversión automática de tipos cuando hay ambigüedad en una expresión utiliza las prioridades para resolver la ambigüedad.
La expresión “13” + 7 es ambigua porque combina un string con un number JavaScript asigna más prioridad al operador + de strings, convirtiendo 7 a string.
La expresión +”13″ también necesita conversión automática de tipos. El operador + solo esta definido para number JavaScript debe convertir el string “13” a number antes de aplicar operador +
13 + 7 => 20 "13" + "7" => "137" "13" + 7 => "137" +"13" + 7 => 20
Operador typeof
El operador typeof permite conocer el tipo de un valor
Devuelve un string con el nombre del tipo
“number”, “string”, “boolean”, “undefined”, “object” y “function”
typeof 7 => "number" typeof "hola" => "string" typeof true => "boolean" typeof undefined => "undefined" typeof null => "object" typeof new Date() => "object" typeof new Function() => "function"
Los operadores están ordenados con prioridad descendente. Mas altos más prioridad.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. [] new () ++ -- ! ~ + - (unitarios) delete typeof void * / % + + - (binarios) << >> >>> < <= > >= instanceof in == != === !== & ^ | && || ?: = OP= ,
+”3″ + 7 => 10
el + unitario tiene mas prioridad y se evalúa antes que + binario
8 * 2 – 4 => 12
* tiene mas prioridad y se evalúa antes que –. Es equivalente a:
(8 * 2) – 4 => 12
El paréntesis tiene más prioridad
8 * (2 – 4) => -16
Introducción a JavaScript
Programa, sentencias y comentarios
Un programa es una secuencia de sentencias que se ejecutan en el orden en que han sido definidas
Las sentencias realizan tareas al ejecutarse en un ordenador. Son los elementos activos de un programa
Los comentarios solo tienen valor informativo para entender o recordar como funciona el programa
Sentencia: definición de Comentario variable x inicializada a 7 _____________________________________________________ var x = 7 ; // Comentario
Comentarios
Los comentarios son mensajes informativos
Deben ser claros, concisos y explicar todo lo importante del programa
Incluso el propio autor los necesita con el tiempo para recordar detalles del programa
En JavaScript hay 2 tipos de comentarios
Monolínea: Delimitados por // y final de línea
Multilínea: Delimitados por /* y */
OJO! Los comentarios multilínea tienen problemas con las expresiones regulares
/* Ejemplo de comentario multilínea que ocupa 2 líneas -> al tener ambigüedades, se recomienda utilizarlos con cuidado */
var x = 1 ; // Comentario monolínea que acaba al final de esta línea
Variables y estado del programa
Las variables se crean con la sentencia de definición de variables. Comienzan con la palabra reservada var, seguida de la variable, a la que se puede asignar un valor inicial.
Se pueden crear varias variables en una sentencia separando las definiciones por comas.
Estado del programa
conjunto de valores contenido en todas sus variables
var x; // crea la variable x y asigna undefined var y = "Hola"; // crea y, asignándole el valor "Hola" var z = 1, t = 2 ; // crea z y t, asignándoles 1 y 2 respectivamente
Sentencia de asignación de variables
Una variable es un contenedor de valores. La sentencia de asignación introduce un nuevo valor en la variable, modificando, por tanto, el estado del programa.
Las variables de JavaScript son no tipadas y pueden contener valores de cualquier tipo de JavaScript.
var x = 5; // Crea la variable x y le asigna el valor inicial 5 x = "Hola"; // Asigna el string (texto) "hola" a la variable x x = new Date(); // Asigna objeto Date a la variable x
Delimitación de sentencias
“;” delimita el final de una sentencia
El final de sentencia también puede delimitarse con nueva línea, pero hay ambigüedades y no se recomienda hacerlo.
Recomendación: cada sentencia en una linea terminada con “;” -> es más legible y seguro.
// Ejemplos de delimitación de sentencias no recomendables
var x ; x = "Hola" // varias sentencias en una fila
var y = "Pepe" // terminar la sentencia sin ";"
Nombres de variables
El nombre (o identificador) de una variable debe comenzar por: letra, _ o $
El nombre puede contener además números.
Nombres bien construidos: x, ya_vás, $A1, $, _43dias
Nombres mal construidos: 1A, 123, %3, v=7, a?b, …
Nombre incorrecto: da error_de_ejecución e interrumpe el programa
Un nombre de variable no debe ser una palabra reservada de JavaScript, como “var”
Las variables son sensibles a mayúsculas, mi_var y Mi_var son variables distintas
Expresiones con variables
Una variable representa el valor que contiene
Puede ser usada en expresiones como cualquier otro valor
Una variable puede utilizarse en la expresión que se asigna a ella misma
La parte derecha usa el valor anterior a la ejecución de la sentencia
En y = y – 2; la variable y tiene el valor 8, por lo que se asigna a y un 6 (8-2)
Usar una variable no definida en una expresión provoca un error y la ejecución del programa se interrumpe
var x = 3;
var y = 5 + x;
y = y - 2;
x = y + z; // Error! la variable z no ha sido definida
Asignación con operación
Es muy común modificar el valor de una variable sumando, restando, … algún valor
Por ejemplo, x = x +7; y = y – 3; z = z * 8; …
JavaScript tiene operadores especiales para estas operaciones
+=, -=, *=, /=, %=, … ( aplica a operadores lógicos, desplazamiento, …)
x += 7; será lo mismo que x = x + 7;
var x = 3; // define x inicializada a 3
x += 2; // suma 2 a x
x *= 3; // multiplica x por 3
x %= 4; // % operación módulo:
// divide x por 4 y devuelve el resto
Pre y post incremento o decremento
JavaScript posee los operadores ++ y — de auto-incremento/decremento
auto-incremento (++) suma 1 a la variable a la que se aplica
auto-decremento (—) resta 1 a la variable a la que se aplica
++ y — se aplican a la izquierda o derecha de una variable en una expresión modificando el valor antes o después de evaluar la expresión.
Al producir efectos laterales y programas crípticos, no se recomienda un uso frecuente
var x = 3; // x -> 3
var y = ++x + 2; // x -> 4
// y -> 6
var z = y-- + 2; // z -> 8
// y -> 5
Entrada/Salida y ejecución de expresiones
La sentencia de ejecución de expresiones puede evaluar expresiones como por ejemplo, 3+2;
o alert(“Texto”); sin asignar el resultado, puede ser: x = 3+2; o 3+2;
Estas sentencias se utilizan habitualmente para comunicar con el exterior, por ejemplo alert(“Texto”); muestra una ventana desplegable al usuario
Una expresión sin efecto lateral, solo genera un valor si ese valor no se guarda en una variable
La instrucción no tiene ningún efecto en el programa, solo consume recursos
alert("Texto"); // expresiones útiles, envían mensaje al exterior
document.write("Texto"); // expresiones útiles, envían mensaje al exterior
var x = 3; // definición e inicialización de variable x*5 - 2; // es una expresión correcta, pero inútil al no guardar el resultado
x = x* 5 + 2; // asignación, es una expresión útil porque guarda el resultado
Ejemplo I: Script con fecha
Ver: 01-fecha.html
Script: programa JavaScript insertado en una página HTML
Delimitado con las marcas <script> con atributo “type=text/javascript”
Se ejecuta al cargar la página HTML en el navegador
document.write(“Texto”) inserta “Texto” en la página Web
En lugar del bloque script, al cargar la página y ejecutar el script document.writeln(“Texto”) inserta además de Texto, nueva línea al final
Ejemplo II: Script con expresión
Ver: 02-expr_alert.html
Script: programa JavaScript insertado en una página HTML
Delimitado con la marca <script> con atributo “type=text/javascript”
Se ejecuta al cargar la página HTML en el navegador
alert(“Texto”) muestra “Texto” en un desplegable
se utiliza para alertar al usuario sobre algún evento o resultado
Funciones alert(), confirm() y prompt()
Interacción sencilla basada en “pop-ups”
alert(msj):
presenta un mensaje al usuario
Retorna al pulsar OK
confirm(msj):
Presenta mensaje y pide confirmación/rechazo
Retorna al pulsar, devuelve true(Ok)/false(Cancel)
prompt(msj):
Presenta mensaje y pide un dato de entrada
Al pulsar OK, retorna y devuelve string introducido
Si se pulsa Cancel devuelve “null”
Ejemplo III: Script conversor
Ver: 03-conversion.html
El script pide el número de Euros a convertir a Dólares con el desplegable de la función prompt()
Cuando el usuario lo introduce calcula el equivalente en dólares ( * 1,12) y lo presenta con document.write(…)
Recargando la página se vuelve a ejecutar el programa
Booleano, igualdad y otros operadores lógicos
Tipo booleano
El tipo boolean (booleano) solo tiene solo 2 valores true: verdadero, false: falso
Operador unitario negación (negation): ! <valor booleano>
Convierte un valor lógico en el opuesto, tal y como muestra la tabla
!false => true !true => false
Las expresiones booleanas, también se denominan expresiones lógicas
Se evalúan siempre a verdadero (true) o falso (false)
Se utilizan para tomar decisiones en sentencias condicionales: if/else, bucles, ….
Por ejemplo: if (expresión booleana) {Acciones_A} else {Acciones_B}
Conversión a booleano
La regla de conversión de otros tipos a booleano es
false: 0, -0, NaN, null, undefined, “”, ”
true: resto de valores
Cuando el operador negación ! se aplica a otro tipo convierte el valor a su equivalente booleano y obtiene el valor booleano opuesto
El operador negación aplicado 2 veces permite obtener el booleano equivalente a un valor de otro tipo, por ejemplo !!1 => true
!4 => false !"4" => false !null => true !0 => true !!"" => false !!4 => true
Operadores de identidad e igualdad
Identidad o igualdad estricta: <v1> === <v2>
Igualdad de tipo y valor, es aplicable a: number, boolean y strings
En objetos es identidad de referencias
Desigualdad estricta: <v1> !== <v2> negación de la igualdad estricta
Igualdad y desigualdad débil: == y !=
¡No utilizar! ¡Conversiones impredecibles!
// Identidad de tipos básicos 0 === 0 => true 0 === 0.0 => true 0 === 0.00 => true 0 === 1 => false 0 === false => false '2' === "2" => true '2' === "02" => false '' === "" => true '' === " " => false
Mas info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Sameness
Operadores de comparación
JavaScript tiene 4 operadores de comparación
Menor que: <
Menor o igual que: <=
Mayor que: >
Mayor o igual que: >=
Utilizad comparaciones sólo con números (number) que poseen una relación de orden bien definida
No se recomiendan utilizar con otros tipos: string, boolean, object, …
Las relación de orden en estos tipos existe, pero es muy poco intuitiva
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
1.2 < 1.3 => true 1 < 1 => false 1 <= 1 => true 1 > 1 => false 1 >= 1 => true false < true => true "a" < "b" => true "a" < "aa" => true
Operador ‘y’ de JavaScript: &&
Operador lógico y operador binario: <valor_1> && <valor_2>
Verdadero sólo si ambos valores son verdaderos
&& se ha extendido y es más que un operador lógico.
No convierte el resultado a booleano
Solo interpreta <valor_1> como booleano y según sea false o true
Devuelve como resultado <valor_1> o <valor_2> sin modificar
Semántica del operador lógico y (and) de JavaScript: <valor_1> && <valor_2>
si <valor_1> se evalúa a false devuelve <valor_1>, sino devuelve <valor_2>
true && true => true false && true => false true && false => false false && false => false 0 && true => 0 1 && "5" => "5"
Operador ‘o’ de JavaScript: ||
Operador lógico o operador binario: <valor_1> || <valor_2>
Verdadero solo si ambos valores son verdaderos
|| se ha extendido y es más que un operador lógico
No convierte el resultado a booleano
Solo interpreta <valor_1> como booleano y según sea false o true
Devuelve como resultado <valor_1> o <valor_2> sin modificar
Semántica del operador lógico o (or) de JavaScript: <valor_1> || <valor_2>
si <valor_1> se evalúa a true devuelve <valor_1>, sino devuelve <valor_2>
true || true => true false || true => true true || false => true false || false => false undefined || 0 => 0 13 || 0 => 13 // Asignar valor por defecto // si x es undefined o null x = x || 0;
Operador de asignación condicional: ?:
El operador de asignación condicional devuelve un valor en función de una condición lógica
La condición lógica va siempre entre paréntesis
Semántica de la asignación condicional: (condición) ? <valor_1> : <valor_2>
si condición se evalúa a true devuelve <valor_1>, sino devuelve <valor_2>
(true) ? 0 : 7 => 0
(false)? 0 : 7 => 7
(7) ? 0 : 7 => 0
("") ? 0 : 7 => 7
