Ya hemos indicado que Javascript es un lenguaje flexible que puede crear objetos, pero la relaci贸n entre lenguaje orientado a objetos y javascript no era directa. Pero a partir de 2015, con el ECMAScript 2015 se actualiz贸 el CORE de Javascript con un nuevo keyword llamado class que permitia generar clases en javascript.
Previamente a 2015 la creaci贸n de las clases se realizaban como objetos de JSON:
var clase1 = {
alumno:'Pascual',
curso:'1A',
Modulo:'Automoci贸n',
Informacion: function(){
return 'En la clase est谩: ' + this. alumno + ' que estudia ' + this.Modulo;}
};
De tal manera que cuando llamabas a la propiedad Informaci贸n(), aparecia la informaci贸n que buscabas.
Clases en Javascript
Desde el 2015 Javascript implement贸 la palabra clave class para la creaci贸n de clases en javascript. La keyword va acompa帽ada de un identificador y entre llaves se definen las propiedades de la clase.
Y dentro de la clase hay que utilizar la craci贸n del constructor para crear los objetos que usaremos en la clase como sus m茅todos y propiedades. El constructor tambi茅n se designa mediante un identificador entre par茅ntesis y con apertura y cierre de llaves y puede o no tener par谩metros.
propiedades.Son las caracter铆sticas que va a adquirir o que definen a la clase en part铆cular como por ejemplo en la clase alumno, ser铆a el DNI, la direcci贸n, el n煤mero de clases en que est谩 matriculado, etc., etc.
En el constructor se definen utilizando la cla煤sula this m谩s el identificador, por lo que a modo de ejemplo podr铆a quedar as铆 de la siguiente forma:
M茅todos.
Tambi茅n las clases tienen m茅todos que se definen en el constructor. Los metodos son funciones que definen acciones de las clases. Por ejemplo la clase alumno ser铆a capaz de estudiar dos asignaturas a la vez, o de hacer "footing" mientras repasa la lista de los reyes Godos; o repasar m谩s r谩pido seg煤n las necesidades del estudio, etc., etc.
En la siguiente imagen se ha a帽adido una nueva propiedad a la clase alumno llamada velocidadLectora que tienen relaci贸n con los m茅todos extresEstudio y relajaci贸nEstudio, como puedes ver a continuaci贸n:
Llamada al objeto.Ahora que ya hemos definido la clase, solo nos queda utilizarla. Para ello simplemente debemos utilizar el objeto tal cual te indico a continuaci贸n con un simple document.write.
declaraci贸n por par谩metros.En el constructor de la clase hemos declarado los valores de las propiedades, pero se pueden dejar sin declarar o declarar directamente a los valores por par谩metros del constructor directamente. Para ello, desde el constructor, se declaran las variables que se utilizar谩n en las declaraciones siguientes y se asigan a sus propios valores (al igual que se hac铆an con c# y Java) en el curso de programaci贸n que puedes visitar AQUI.
La llamada a la clase se hace igual que la forma anterior, pero ahora se pone entre par茅ntesis los valores que se quieran dar a la variable asignada al nuevo alumno (en este caso la variable estudiante):
Y en cuanto a los m茅todos, puedes llamarlos en cualquier momento del c贸digo y se van a ejecutar. por ejemplo el m茅todo extresEstudio de la clase alumno1, aumenta en 1 la velocidad de estudio del alumno, por lo que cada vez que llamemos a ese m茅todo la propiedad de velocidadLectora se ha tenido que sumar en unidad por llamada de m茅todo.
Para llamar al m茅todo tenemos que llamar desde el objeto javascript creado haciendo referencia al m茅todo que queremos llamar, que en nuestro caso es extresEstudio de la forma siguiente:
variable.m茅todo()
Herencia
La herencia es el mecanismo que tienen los lenguajes de programaci贸n orientado a objetos de heredar propiedades y m茅todos de otros objetos derivados. Para que un objeto adquiera los atributos de otra clase, se debe de utilizar la palabra reservada extends usando en la creaci贸n de la nueva clase heredada un constructor con los mismos par谩metros (si los tuviese y si se quisiese), de los mismos par谩metros de la clase padre adem谩s de una cla煤sula super con los mismos par谩metros de la clase padre, como puedes ver en el ejemplo.
Adem谩s de lo bueno de la herencia es que podemos declarar nuestras propias propiedades y nuestros propios m茅todos adem谩s de los a帽adidos por otras clases. Para las propiedades a帽adiendo this m谩s el identificador de la propiedades + el valor y el tipo de dato y el m茅tdos usando el return y la llamada entre llaves:
Escucha de eventos.
Ya hemos visto en el v铆deo del cap铆tulo anterior que Javascript es un lenguaje que se ejecuta a trav茅s del navegador, por lo que se puede configurar y se puede desactivar desde administraci贸n y aveces, puede que no se ejecuten script de javascript cuando se enlazan en atributos de enlace a etiquetas de hiperv铆nculos con direcciones a script de javascript.
Por eso lo m谩s habitual es crear aplicaciones en las cuales el cliente puede iteratuar con la aplicaci贸n pulsando alg煤n bot贸n que llame a una funci贸n javascript, ya que dicho bot贸n est谩 a la espera de un evento o una acci贸n del usuario. Esa acci贸n es una espera programada por el navegador parcial, un evento de nivel 1. Pero en el DOM se pueden programar otros tipos de eventos como el evento de nivel 2 que define el evento addEventListening(),que permite indicar al agente de usuario que permanezca atento a la interacci贸n de un usuario sobre un elemento en concreto, sin necesidad de tocar un s贸lo car谩cter de nuestro marcado. Su principal funci贸n es permitir responder a las interacciones de los usuarios o cambios en la red.
Los eventos se propagan a trav茅s del DOM del navegador a trav茅s de su estructura de 谩rbol de etiquetado de las sintaxis del XHTML original. As铆 en cada elemento que interviene en el HTML del documento se implementa una interfaz EventTarget, con lo que, solo basta seleccionar dicho selector y una acci贸n al listener las siguientes opciones:
● Type: Representa el nombre del evento que queremos escuchar.
● Callback: La funci贸n que ser谩 invocada cuando se reciba el evento.
● Options: Es un objeto para definir por defecto el comportamiento del listener. Suele ser true o false.
Veamoslo mejor con un ejemplo. Sup贸n que tienes un bot贸n en un formulario y que quieres controlar las veces que se pulsa dicho bot贸n para evitar que un mismo usuario lo pulse m谩s de x n煤mero de veces. Con la escucha de eventos podr铆as programar un simple script tal como puedes ver en pantalla:
Observa al ejecutarlo como cada vez que pulses el bot贸n, se cambiar谩 el n煤mero de veces que ejecutas la consulta. Introduciendo esto en un bucle o en una condici贸n, podr铆amos limitar la acci贸n del usuario en un formulario para evitar el envio infinito de formularios, por ejemplo.
Web Services.
Los Web services son m茅todos de comunicaci贸n de sistemas electr贸nicos en una red mediante protocolo o est谩ndares usados para intercambiar datos entre aplicaciones o sistemas. Por ejemplo la interoperatividad entre python, java o Windows y Linux por ejemplo se debe al uso de est谩ndares abiertos.
Como sistema de mensajes se utiliza XML estandarizado. El protocolo m谩s simple para el intercambio de informaci贸n entre ordenadores es XML-RPC, que emplea XML para llevar a cabo RPCs. RPC, Remote Procedure Call, es un protocolo de red que permite a un programa a ejecutar c贸digo en una m谩quina remota. Los XML-RPC requests son una combinaci贸n entre contenido XML y headers HTTP. La simpleza de los XML-RPC hizo que el est谩ndar evolucionase a SOAP, uno de los componentes b谩sicos de los Web Services.
Existe un servidor que ofrece el servicio y soporta la conexi贸n al dispositivo anfitri贸n, por eso, el servicio siempre sera un servicio que estar谩 soportado en red y estar谩 actualizado en todo momento. Para que lo entiendas mejor vamos a crear una peque帽a aplicaci贸n web.
Tengo en el servidor web el siguiente archivo JSON con la siguiente informaci贸n:
{
nombre: "mirpas",
palabra: "formaci贸n",
verdad: "gratis"
}
Voy a crear un nuevo documento web local con un formulario con tres campos tipo input texto que van a recibir los campos del archivo del servidor. Pero antes de recibirlos tendr茅 que llarmarlos con un script as铆ncrono de Javascript. Vamos por pasos. El formulario tendr铆a el siguiente aspecto:
Llamada a la funci贸n.Desde el script en la cabecera del documento, importante, vamos a usar la funci贸n fetch(). Esta funci贸n de Javascript permite enviar peticiones as铆ncronas al servidor puesto entre par茅ntesis para obtener sus recursos de forma l贸gica y sencilla. Por as铆 decirlo, se comunica con el servidor y realiza peticiones como un objeto Promise, por lo que se necesita un objeto JSON para obtener la respuesta del servidor.
Ten en cuenta que la aplicaci贸n no te va a permitir descargar los datos desde el servidor directamente ya que ahora nos estamos conectando localmente desde un ordenador local y los Web services est谩n orientados para los servicios en remoto.
Para que nos funcione en local nos descargaremos la extensi贸n CORS desde Google Store y la instalamos en nuestro navegador como extensi贸n adicional.
