Ahora también distribuidor oficial BQ

Aplicaciones web (III)

HTML5 CSS3 JS

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

HTML5 CSS3 JS

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

HTML5 CSS3 JS

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

 

Comments are closed.