Desarrollo de aplicaciones WEB

Introducción a JavaScript

Departamento Informática y Sistemas

Introducción

JavaScript se utiliza, en las páginas HTML para:

Se asocia a menudo con otras tecnologías o lenguajes, como DHTML y Java

Es texto, no precisa de compiladores o herramientas especializadas

Un editor de textos permite la edición de una página en HTML e insertar instrucciones JavaScript

Introducción

Cómo encaja JavaScript en una página web

Introducción

¿Qué es un script

Archivo de órdenes, archivo de procesamiento por lotes o guión es un programa simple, que se almacena en un archivo de texto plano. Ejs.:

Introducción

Creación de un script

    Definir la tarea a ejecutar
    Diseñar la tarea mediante una serie de pasos
    Codificar cada etapa en el lenguaje elegido

Introducción

JavaScript es:

Javascript no está directamente relacionado con el lenguaje Java

Fue creado por la empresa Netscape

Integrado en Netscape Navigator en 1996

Estandarizado por ECMA, organismo de normalización suizo (ECMAScript, 1997)

Introducción

Posibilidades de JavaScript


Con JavaScript, se pueden crear páginas web dinámicas

Hay editores WYSIWYG capaces de generar código JavaScript automáticamente

Introducción

Acceso al contenido


Se puede usar para seleccionar cualquier elemento, atributo o texto de una página en HTML. Ej.:

Introducción

Modificación del contenido


Se puede usar para añadir o eliminar elementos, atributos y texto a una página.Ej.:

Introducción

Reglas de programación


Se pueden especificar un conjunto de etapas que ha de seguir el navegador, que permiten cambiar el contenido de la página. Ej.:

Introducción

Reacción frente a eventos


Se puede especificar que se ejecute un script como respuesta a un evento. Ej.:

Introducción

Esquema de una instrucción en JavaScript


document.write ('Universidad de Murcia');


objeto: document

.: operador miembro (permite acceder a los miembros de un objeto)

método: write ('Universidad de Murcia');

parámetros: 'Universidad de Murcia'

Introducción

Escribir un programa en JavaScript ...

Consiste en:

Advertencia: JavaScript diferencia entre mayúsculas y minúsculas

Introducción

Inserción de código JavaScript en HTML

El código JavaScript se inserta por lo general en la página HTML, también se puede insertar mediante el uso de un archivo externo

Introducción

Declaración de variables


Antes de usar una variable es necesario indicarlo. Ej.:

var: aceleracion;


var: Palabra clave para definir variables

aceleracion: Nombre de la variable

Introducción

Denominación de variables

Introducción

Arrays


Son un tipo especial de variables


Usuales cuando se trabaja con una lista de valores relacionados

Se denominan como cualquier otra variable

Los valores se asignan entre corchetes ([]), separados con comas (array literal)

Otra posibilidad, palabra clave new seguida de Array, con los valores entre paréntesis (array constructor)

Pueden ser de distintos tipos


Introducción

Acceso a valores en un array


Se consideran una lista numerada, que comienza con el elemento 0

Cada elemento recibe automáticamente un número llamado index

Para recuperar un elemento se indica el nombre del array y entre corchetes el index

El número de elementos se asigna a length

Introducción

Ejemplos con array


var colores;

colores= ['blanco', 'verde', 'rojo'];


var itemTres;

itemTres = colores[2]


var numeroColores;

numeroColores = colores.length

Introducción

Cambio de valores en un array


// Crea el array

var colores = ['blanco', 'verde', 'rojo'];


// Modifica el tercer elemento

colores[2] ='azul';

Introducción

Expresiones


Una expresión evalúa resultados a un valor único


Hay dos tipos:

Los operadores permiten un valor a partir de varios

Introducción

Operadores en JavaScript

Introducción

Operadores de asignación

Introducción

Operadores aritméticos


OPERADORES

DESCRIPCIÓN

+

Suma

–

Resta

*

Multiplicación

/

División

%

Resto de una división entre enteros (mod)

++

Incremento una unidad

--

Decremento una unidad

Introducción

Operadores aritméticos


Orden de ejecución:


Multiplicación y división se ejecutan antes que adición o substracción

Para cambiar el orden se usan paréntesis


total=2+4+10; resultado 16

total=2+4*10; resultado 42

total=(2+4)*10; resultado 60

Introducción

Operador string


Se emplea el símbolo + para unir cadenas de caracteres


Los números entre comillas se consideran string

Si se añade un número (sin comillas) pasa a ser parte del string

Si se usan otros operadores aritméticos el resultando es NaN

Introducción

Operadores lógicos


Los operadores lógicos son típicamente utilizados con valores booleanos (valores lógicos) y devuelven un valor booleano


Operador Uso Descripción
&& expr1 && expr2

(AND lógico) Devuelve expr1 si puede ser convertido a false o sino devuelve expr2. Así, cuando se usa con valores boleanos, && devuelve true si ambos operandos son true, en caso contrario devuelve false.
|| expr1 || expr2

(OR lógico) Devuelve expr1 si puede ser convertido a false o si no devuelve expr2. Así, cuando se usa con valores boleanos, && devuelve true si cualquier operandos es true, o false si ambos son falsos.
! !expr

(NOT lógico) Devuelve false si el operando no puede ser convertido a true, en caso contrario, devuelve true

Introducción

Operadores de comparación


Comparan sus operandos y devuelven un valor lógico basado en si la comparación es verdadera (true) o falsa (false)


Operador Descripción Ejemplos devolviendo true
Igualdad (==) Devuelve true si ambos operandos son iguales. 3 == var1

"3" == var1

3 == '3'
Desigualdad (!=) Devuelve true si ambos operandos no son iguales. var1 != 4
var2 != "3"
Estrictamente igual (===)

Devuelve true si los operandos son igual y tienen el mismo tipo.

3 === var1
Estrictamente desiguales(!==)

Devuelve true si los operandos no son igual y/o no tienen el mismo tipo.

 var1 !== "3"
3 !== '3'
Mayor que (>)

Devuelve true si el operando de la izquierda es mas grande que el operando de la derecha.

 var2 > var1
"12" > 2
Mayor o igual que (>=) Devuelve true si el operando de la izquierda es mas grande que el operando de la derecha. var2 >= var1
var1 >= 3
Menor que (<) Devuelve true si el operando de la izquierda es mas pequeño que el operando de la derecha. var1 < var2
"2" < "12"
Menor o igual que (<=) Devuelve true si el operando de la izquierda es mas pequeño o igual que el operando de la derecha. var1 <= var2
var2 <= 5

Funciones, métodos y objetos

Conceptos


Funciones, métodos y objetos

Funciones


Para crear una función se le debe dar un nombre e incluir entre llaves ({}) las sentencias necesarias para ejecutarla

Es el proceso para "declarar una función"

La palabra clave es function

function saluda() {document.write('Hola')};

Funciones, métodos y objetos

Funciones que necesitan información


Al declarar la función se han de indicar parámetros, que actúan como variables

function calculaArea(ancho, alto) {return ancho*alto;}


Los argumentos se pueden pasar como valores o como variables. Ej.:

calculaArea(6,4)

anchoPared=6; altoPared=6; calculaArea(anchoPared, altoPared);

Funciones, métodos y objetos

Funciones que retornan un valor único


function calculaArea(ancho, alto) {

var area=ancho*alto;

return area;

}

Var pared1 = calculaArea(3,5);

Var pared2 = calculaArea(8,5);

Funciones, métodos y objetos

Funciones que retornan varios valores


Se considera el ejemplo del cálculo de la superficie y volumen de una caja


function obtieneValores(ancho, alto, profundo) {

var area = ancho*alto; var volumen = ancho*alto*profundo; var valores = [area, volumen]; return valores; }

var area1 = obtieneValores(3,2,3)[0]; var volumen1 = obtieneValores(3,2,3)[1];

Funciones, métodos y objetos

Otras consideraciones


Una expresión genera un valor. Si una función se sitúa donde un navegador espera una expresión (como argumento de una función), se trata como una expresión


Declaración de función. Ej.:

function area(ancho, alto); {return ancho*alto;}; var dimension = area(3,4);


Función expresión. Ej.:

var area = function area(ancho, alto); {return ancho*alto;}; var dimension = area(3,4);

Funciones, métodos y objetos

Ámbito de las variables (scope)


El ámbito de una variable es la zona del programa en la que se define la variable. Hay dos ámbitos para las variables: global y local. Ej.:


function creaMensaje() {

var mensaje = “Mensaje de prueba”;

}

creaMensaje(); alert(mensaje);


No se muestra nada, mensaje es una variable local


Funciones, métodos y objetos

Ámbito de las variables (scope)


function creaMensaje() {

var mensaje = “Mensaje de prueba”;

alert(mensaje);

}

creaMensaje();


La variable global, está definida en cualquier sitio(incluso dentro de cualquier función)

Funciones, métodos y objetos

Objetos


Los objetos agrupan un conjunto de variables y funciones para crear un modelo de "algo real"

En un objeto, las variables y funciones adquieren nuevos nombres

Si una variable es parte de un objeto, se llama propiedad, como por ejemplo el nombre de un hotel o número de habitaciones

En un objeto las funciones se denominan métodos. Representan tareas que están asociadas con el objeto. Por ejemplo, se puede comprobar cuántas habitaciones están disponibles

Funciones, métodos y objetos

Objetos


Por ejemplo, sobre un hotel:


Se considera que el hotel tiene cinco propiedades y un método

El valor de un método es siempre una función

El valor de una propiedad puede ser un string, número, booleano, array u otro objeto

var hotel = {
nombre: 'Hotel mediaestrella',
habitaciones: 137,
ocupadas: 30,
tipo habitaciones: ['sencilla', 'doble', 'suite'],
wifi: true,
verificaDisponibilidad: function(){
return this.habitaciones-this.ocupadas;
}
};

Funciones, métodos y objetos

Acceso a objetos


Para acceder a una propiedad o método de un objeto, se usa el nombre del objeto seguido de un punto (.) y a continuación el nombre de la propiedad o método al que se desea acceder. Ej.:


var hotelNombre = hotel.nombre;

var habitacionesLibres = hotel.verificaDisponibilidad();

Para acceder a una propiedad de un objeto se usan corchetes. Ej.:


var hotelNombre = hotel['nombre'];

Funciones, métodos y objetos

Actualización de un objeto


Para actualizar los valores de propiedades de un objeto se usan la notación punto (.) o los corchetes

Para borrar una propiedad se usa la palabra clave delete


Ejemplo de actualización de propiedad:

hotel.nombre = 'Superhotel';

hotel['nombre'] = 'Superhotel';


Ejemplo de delete hotel.nombre;

hotel.nombre = '';

Estructuras de control de flujo

Con variables y operadores se tiene una sucesión lineal de instrucciones básicas

Estructuras de control de flujo, son instrucciones del tipo:


"si se cumple esta condición, hazlo; si no se cumple, haz esto otro"

"repite esto mientras se cumpla esta condición"

Estructuras de control de flujo

Estructura if


La más utilizada en JavaScript. Se emplea para tomar decisiones en función de una condición:


if(condicion) {

...

}

Si la condición se cumple (true) se ejecutan las instrucciones que se encuentran dentro de {...}

Si no se cumple (false) no se ejecuta ninguna instrucción contenida en {...} y el programa continúa ejecutando el resto de instrucciones

var mostrarMensaje = true;
 if(mostrarMensaje) {
  alert("Hola Mundo");
}

Estructuras de control de flujo

Estructura if


La condición que controla el if() puede combinar los diferentes operadores lógicos y relacionales

Los operadores AND y OR permiten encadenar varias condiciones simples para construir condiciones complejas:

var mostrado = false;
var usuarioPermiteMensajes = true;
 
if(!mostrado && usuarioPermiteMensajes) {
  alert("Primera vez que se muestra el mensaje");
}

Estructuras de control de flujo

Estructura if...else


Las condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro"

Variante de la estructura if llamada if...else. Su sintaxis es la siguiente:


if(condicion) {

...

}

else {

...

}


Estructuras de control de flujo

Estructura if...else


El siguiente ejemplo muestra si una persona está jubilada


var edad 70;
if(edad >= 70) {
  alert("Estás jubilado");
}
else {
  alert("Todavía estás trabajando o en el paro");
}

Estructuras de control de flujo

Estructura for


if y if...else no son muy eficientes cuando se desea ejecutar de forma repetitiva una instrucción


Bucle for: "mientras la condición indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la condición"


var mensaje = "Estoy dentro de un bucle";
 
for(var i = 0; i < 5; i++) {
  alert(mensaje);
}

Estructuras de control de flujo

Estructura for...in


Implica el uso de objetos

Sintaxis adaptada a los arrays:


for(indice in array) {

...

}

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
 
for(i in dias) {
  alert(dias[i]);
}

Funciones

Funciones útiles para cadenas de texto


length, calcula la longitud de una cadena de texto

+, concatena varias cadenas de texto

concat, concatena varias cadenas de texto

toUpperCase(), transforma los caracteres a sus correspondientes caracteres en mayúsculas

toLowerCase(), transforma los caracteres a sus correspondientes caracteres en minúsculas

charAt(posicion), obtiene el carácter que se encuentra en la posición indicada

indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena

lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena

substring(inicio, final), extrae una porción de una cadena

split(separador), convierte una cadena de texto en un array de cadenas de texto

Funciones

Funciones útiles para arrays


length, calcula el número de elementos de un array

concat(), se emplea para concatenar los elementos de varios arrays

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto

pop(), elimina el último elemento del array y lo devuelve

push(), añade un elemento al final del array

shift(), elimina el primer elemento del array y lo devuelve

unshift(), añade un elemento al principio del array

reverse(), modifica un array colocando sus elementos en el orden inverso

Funciones

Funciones útiles para números


NaN, indica un valor numérico no definido

isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos

Infinity, hace referencia a un valor numérico infinito y positivo (también existe el valor –Infinity para los infinitos negativos)

toFixed(digitos), devuelve el número original con tantos decimales como los indicados por el parámetro

← →

/