Programación Web - Apuntes y ejercicios

Clase Constructor

Un constructor es un método de las clases, el cual es llamado automáticamente cuando se crea un objeto de esa clase. Este concepto no existe en JavaScript, pero podremos emular su funcionamiento usando funciones.

En el siguiente ejemplo vamos a crear una función que llamaremos Factura, que usaremos para crear los objetos Factura:

function Factura(idFactura, idCliente) {
this.idFactura = idFactura;
this.idCliente = idCliente;
}

Uso de la función constructora para crear nuevo objeto:

var laFactura = new Factura (10,17);

Uso de la función para recuperar los datos:

var cliente = laFactura.idCliente; en este caso cliente será '10'.
var factura = laFactura.isFactura; en este caso factura será '17'.

Prototipo

Se definen las clases prototipo para un determinado objeto, que las incorpora para todo el programa. Por ejemplo, si a un objeto String le añadimos una función de concatenación de la palabra 'hola'.

String.prototype.hola = function() {
return 'hola ' + this.value;
}

Uso de la función prototipo:

var miCadena = 'Juan';
var miCadena2 = miCadena.hola;

El resultado será 'hola Juan'

Herencia y ámbito

En Javascript no existen las herencias ni los ámbitos, pero se pueden simular mediante funciones y prototypes

Se puede conseguir el concepto de herencia de propiedades mediante la copia de una clase origen a una destino

Object.extend = function (ClaseDestino, ClaseOrigen) {
for (var nombrePropiedad in ClaseOrigen) {
ClaseDestino[nombrePropiedad] = ClaseOrigen[nombrePropiedad];
}
return ClaseDestino;
}

Tratamiento de excepciones con Try-Catch

Para realizar el tratamiento de excepciones en JavaScript se usa un mecanismo compuesto por 3 bloques de palabras reservadas try, catch y finally.

1. Bloque try: dentro de este bloque se introduce el código que se desea controlar
2. Bloque catch: en este bloque habrá las instrucciones a realizar si se detecta una excepción
3. Bloque finally: las instrucciones contenidas en él, se ejecutarán siempre, haya o no error previo. Es opcional.

try {
... // pieza de código a controlar
} catch (exception) {
... // instrucciones a ejecutar si hay error
} finally {
... // instrucciones a ejecutar sí o sí
}

JSON

JSON (JavaScript Object Notation) es el formato sencillo para el intercambio de información. Este formato nos permitirá representar estructuras de datos (arrays) y objetos (arrays asociativos) en forma de texto.

Array: un array se representa como un conjunto de valores

var array = [valor1, valor2, valor3,..., valorN];

Objeto: el objeto es una representación mendiante claves y valores separados por comas y entre corchetes

var objeto = {clave1:valor1, clave2:valor2, ... , claveN:valorN};

En general, una notación objeto puede contener valores o arrays entre los valores que se le consignan, por ejemplo como la estructura siguiente:

var objeto = {
propiedad1: valor1,
propiedad2: valor2,
propiedad3: [array_valor1,array_valor2],
propiedad4: {propiedad_anidada: valor_anidado1},
metodo1: nombre_funcion_externa,
...
}

Ajax, conexión a servidor

El término AJAX es un acrónimo de Asynchronous JavaScript + XML, traducido como “JavaScript asíncrono + XML”. Las diferentes tecnologías que componen AJAX son:

• XHTML y CSS, con la que crearemos una presentación basada en estándares.
• DOM, para interactuar y manipular dinámicamente la presentación.
• XML, XSLT y JSON, para intercambiar y manipular la información.
• XMLHttpRequest, que sirve para el intercambio asíncrono de información.
• JavaScript, que es la que une todas las demás tecnologías.

La programación de llamadas a servidor se organiza en los siguientes bloques:

1. instancia del objeto XMLHttpRequest
   peticion_http = new XMLHttpRequest(); para todos los navegadores excepto IE
   peticion_http = new ActiveXObject(“Microsoft.XMLHTTP”); sólo IE

2. preparación de la función de respuesta
   peticion_http.onreadystatechange = muestraContenido;

3. petición al servidor
   peticion_http.open(‘GET’, ‘http://localhost:56124/HolaMundo.txt’, true);
peticion_http.send(null);

4. ejecución de la respuesta
   function muestraContenido() {
if (peticion_http.readyState == 4) {
if (peticion_http.status == 200) {
alert(peticion_http.responseText);
}
}
}

Introducción

jQuery es una forma de acceder a los objetos del DOM de una manera simplificada. Es una librería de JavaScript que se debe incluir en el proyecto. Bajada desde http://jquery.com/

El uso consta de

1. Declaración en la página html de la librería jQuery actualizada:

   <script src='Scripts/jquery-1.8.2.min.js' type='text/javascript'>

2. Declaración en la página html del archivo de funciones propio:

   <script src='Scripts/mis-funciones.js' type='text/javascript>

3. Escritura de las funciones y accesos a jQuery en nuestro archivo de funciones:

   
var x; x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  var x;
  x = $(“#boton1”);
  x.click(presionBoton)
}

function presionBoton() {
  alert(“Se presionó el botón”);
}

Selección de nodos

Se pueden seleccionar los nodos de una forma similar a lo que hacemos con los objetos DOM:

• El documento: es el elemento principal y se utiliza para determinar cuando la página se ha cargado completamente

  x = $(document);
x.ready(funcion_a_ejecutar);

• Selección por ID: la selección se realiza mediante el id que se le ha dado en el código html:

  x = $('#object_id');
x.click(funcion_a_ejecutar);

• Selección por tipo: la selección se realiza mediante el tipo del objeto:

  x = $('nombre_elemento');
x.click(funcion_a_ejecutar);

• Selección por clase: la selección se realiza mediante la clase del objeto:

  x = $('.mi_clase');
x.click(funcion_a_ejecutar);

• Selección por combinación: pueden usarse varias técnicas de selección de objetos, por ejemplo, los elementos de una lista:

  x = $('#mi_lista li');
x.click(funcion_a_ejecutar);

Acceso a los estilos de los nodos

Se accede a los estilos CSS mediante la palabra clave 'css' y pasando como parámetros el nombre de la propiedad y el valor.

var t;
t = $(this);
t.css("color", "#ff0000");
t.css("background-color", "#FFFF00");

Se recupera el valor pasando solamente el nombre de la propiedad

var miColor = t.css("color");

Métodos habituales en jQuery

Se aplican los métodos o funciones con la fórmula siguiente: $(elemento).método(argumentos)

método	descripción
Texto:	.text(); obtiene el valor actual del elemento .text('valor'); establece un nuevo valor
Attributos:	.attr('propiedad'); obtiene el valor actual de la propiedad del elemento .attr('propiedad', 'valor'); establece un nuevo valor .removeAttr('propiedad'); elimina la propiedad del objeto DOM
Clases:	.addClass('nombre de la clase'); añade una clase al elemento .removeClass('nombre de la clase'); elimina la clase del elemento
Html:	.html(); recupera el contenido html del elemento .html('texto html'); agrega un código html al elemento
Fade:	.fadeIn(velocidad); incrementa la visibilidad del elemento a una velocidad 'fast' o 'slow' .fadeOut(velocidad); atenúa la visibilidad .fadeTo(velocidad, opacidad); inclluye nivel de opacidad que oscila entre 0 y 1
Visibilidad:	.hide(velocidad); esconde el elemento a una velocidad 'fast' o 'slow' .show(velocidad); muestra el elemento a una velocidad .toggle(velocidad); cambia la visualización hide/show alternativamente

Manipulación de nodos

• Añadir un nodo al final de la colección:

  var x = $('#miLista');
x.append('<li> nuevo_item_de_lista<li>');

• Añadir un nodo al inicio de la colección:

  var x = $('#miLista');
x.prepend('<li> nuevo_item_de_lista<li>');

• Eliminar toda la colección de nodos:

  var x = $('#miLista');
x.empty();

• Eliminar un nodo:

  var x = $('#miLista');
var nodo = x.eq(n); n es el índice de nodo dentro de la colección
  nodo.remove();

• each paseo por todos los nodos:

  var x = $('p');
x.each(función);

Administración de los eventos

La ventaja de utilizar el jQuery en la administración de los eventos será su facilidad de uso y su integración con todos los navegadores, sin importarnos cuál es el que usemos.

La forma de uso es simple: $('objeto').evento(función a ejecutar); sin la palabra 'on' del evento visto en DOM.

evento	descripción
.click	evento del click del control, una vez pulsado, realiza la función declarada: x.click(funcion);
.mouseover	el ratón pasa encima del objeto
.mouseout	el ratón sale del objeto
.hover	contempla la entrada y la salida del ratón de la zona del objeto. Hay que consignar las 2 funciones: x.hover(f_entrada,f_salida);
.focus	el objeto toma el foco, por ejemplo en una casilla de entrada de datos
.blur	el objeto pierde el foco
.mousemove	el ratón se mueve en la zona del objeto
.mousedown	el ratón detecta el click sobre el control
.mouseup	se detecta la liberación
.dblclick	doble click en el objeto