Curso de Programación Orientada a Objetos con Javascript

Te explicamos en este vídeo lo que encontrarás en este curso y las características y enfoque de esta formación sobre programación orientada a objetos.

Vamos a repasar 4 conceptos transversales en el mundo de la programación, como son la abstracción, la encapsulación, modularización y jerarquización.

Los conceptos de programación que vimos en el anterior vídeo: abstracción, la encapsulación, modularización y jerarquización los vamos a aterrizar en las herramientas que nos ofrecen los lenguajes de alto nivel que ya conocemos.

Qué es un paradigma de programación y definición del paradigma de programación estructurada.

Cómo pasamos del paradigma de la programación estructurada al paradigma de la programación orientada a objetos. Por qué este paradigma es más deseable para desarrollar software que la programación estructurada.

Teoría: Qué son las clases y qué son los objetos, conceptos esenciales de Programación Orientada a Objetos.

Teoría: Qué son los mensajes y qué son los métodos.

Teoría: Qué son los atributos, también llamados propiedades, y qué es el estado de los objetos.

En Javascript podemos trabajar con objetos en muchos contextos. El propio lenguaje ofrece numerosas utilidades en objetos incorporados, por lo que los usamos con frecuencia. Sin embargo, en el curso hemos dicho que para hacer objetos tenemos que instanciarlos a partir de clases, pero eso no es siempre así en Javascript, ya que podemos crear objetos con literales. Vamos a ver estas y otras cosas que pueden resultar un poco confusas y que debemos de conocer.

Es el mecanismo más antiguo para crear objetos de un tipo determinado en Javascript. Veremos cómo hacer funciones constructoras para definir clases de objetos y cómo instanciar los objetos por medio del operador new.

Es otra manera de crear clases de objetos en Javascript, todavía más sencilla de las funciones constructoras, que nos demuestra la maleabilidad del lenguaje.

Se dice que Javascript es un lenguaje orientado a prototipos. Para entender esta afirmación veremos qué es un prototipo y cómo podemos usarlos para crear objetos de un tipo determinado.

Si hay algo raro en Javascript, y que nos puede dar especiales problemas y a veces frustraciones si no lo dominamos, es la variable this. Vamos a explicar qué es this y cómo su valor puede ir cambiando dependiendo de lo que estemos haciendo.

Antes de continuar vamos a explicar a bajo nivel qué es lo que hace el operador new en Javascript y cómo cambia el contexto de this dentro de la función constructora.

Vamos a hacer un ejercicio completamente práctico para poder afianzar los conocimientos que hemos adquirido hasta el momento sobre el modo de trabajo con orientación a objetos en Javascript tradicional. En este ejercicio además podremos ver situaciones en las que históricamente teníamos problemas con la redefinición del contexto y la variable this, aportando tres posibles soluciones para resolver estas cuestiones.

Cómo definimos una clase en Javascript ES6, el estándar ECMAScript 2015. Cómo instanciamos objetos de una clase.

Veremos qué es un constructor y cómo implementarlos en Javascript.

Vamos a profundizar en la creación de propiedades (atributos) y métodos en Javascript usando las clases modernas y cómo lanzar mensajes o acceder al estado de los objetos.

El mundo de los objetos es muy potente porque podemos construir unos objetos en base a otros objetos. Esto nos aporta niveles de abstracción, modularización y jerarquización muy importantes para mejorar la comprensibilidad de los programas y reducir la complejidad de los desarrollos.

Vamos a repasar la notación de los corchetes como método de acceso a los miembros de los objetos, ya sean propiedades o métodos para invocarlos.

Esta clase la vamos a dedicar a conocer los módulos en Javascript basados en el estándar ECMAScript. Veremos el concepto de módulo y cómo podemos exportar e importar cosas de unos módulos a otros. Los módulos son esenciales para poder organizar de una manera mantenible el código de las aplicaciones y los vamos a usar constantemente para construir nuestros ejemplos durante el curso de Programación Orientada a Objetos en Javascript.

En esta clase vamos a ver qué es Phaser y qué nos ofrece como framework para desarrollo de juegos en Javascript. Además comenzaremos a desarrollar nuestro primer juego con Javascript. Veremos las piezas fundamentales de un juego en Phaser y cómo dar los primeros pasos para colocar objetos en las escenas del juego, haciendo clases independientes que puedan mantener de manera encapsulada su complejidad.

En esta clase en vivo estaremos disponibles para responder preguntas y realizar ejercicios extra para incrementar la parte práctica del curso.

Comenzamos con un poco de teoría para definir qué es la vista pública y vista privada de los objetos. Por qué es importante mantener privados todos los miembros que no necesiten ser públicos, para fomentar la encapsulación.

Explicamos la nueva sintaxis para definir propiedades privadas en las clases, de modo que no se puedan acceder desde los objetos.

También es posible definir métodos privados, de modo que no se puedan invocar con un objeto.

Otra manera de crear propiedades en Javascript es por medio de getters y setters. Existen desde hace mucho y en realidad pertenecen a Javascript tradicional pero los veremos en este bloque por si acaso no los conoces. Explicaremos qué son los getter y los setter y cómo funcionan con ejemplos.

Vamos a explicar qué son los miembros de clase y ponerlos en contraste con los miembros de objeto que hemos conocido hasta ahora. Entenderemos las diferencias entre estos dos tipos de miembros y por qué necesitamos los miembros de clase.

Ejemplo práctico de propiedades de clase (estáticas) en Javascript.

Veremos ejemplos de implementación y uso de métodos estáticos en Javascript.

Además de los miembros de clase definidos con static dentro del código de la clase también podríamos hacer miembros de clase dinámicos, creados en tiempo de ejecución. Veremos de qué se trata, cómo se pueden hacer y las diferencias entre los miembros estáticos tradicionales.

Un poco de teoría para explicar el mecanismo de herencia en el mundo de la programación orientada a objetos y la importancia que tiene.

Veremos ejemplos de herencia en Javascript, de modo que aprenderemos a implementarla, a la vez que vemos casos útiles donde le podemos sacar partido.

Qué es la sobreescritura de métodos en Javascript, con ejemplos prácticos sobre para qué lo podemos utilizar.

Cómo funcionan los constructores en la herencia y el uso de super().

Presentamos otra tutoría donde seguiremos ampliando las prácticas del curso y donde podremos resolver dudas en vivo de los estudiantes.

Ahora vamos a ver que es posible la invocación de cualquiera de los métodos, tal como se han definido en la superclase, por medio de super y el nombre del método que queremos invocar tal como se implantó en la clase padre.

Cuando trabajamos con herencia importa mucho cómo se definieron los métodos en la clase padre en lo que respecta a la visibilidad, es decir, si eran públicos o privados. Veremos qué pasa con los atributos y métodos privados, cuando los necesitamos usar en las clases derivadas.

Los miembros estáticos también tienen algunas cosas que necesitamos entender cuando estamos trabajando con herencia en programación orientada a objetos. Veremos cómo funciona en Javascript, que es orientado a prototipo, y las diferencias con otros lenguajes de programación orientada a objetos más tradicionales que puedas conocer, del estilo de Java.

En este vídeo vamos a mostrar de manera práctica unos ejemplos de componentes estándar de Javascript, lo que llamamos "Web Components". Este estándar usa el mecanismo de herencia para la definición de "Custom Elements", que son componentes que sirven para crear nuevas etiquetas con las que extender el HTML. Veremos un ejemplo de componente que extiende la clase nativa HTMLElement y luego haremos un nuevo componente que extiende otros custom Element. Todo esto nos permitirá ver que la herencia es un mecanismo básico también para el desarrollo frontend nativo y además nos servirá para ver ejemplos claros y realistas de "herencia por extensión".

Qué es herencia simple y herencia múltiple. Problemáticas de la herencia múltiple. En Javascript podemos implementar de manera directa la herencia simple pero también podríamos realizar técnicas para conseguir herencia múltiple por medio de mixins que vamos a explicar.

Un poco de teoría para explicar de manera genérica qué es el polimorfismo en los lenguajes de programación y por qué es importante.

Ahora vamos a ver cómo se aplica este concepto de polimorfismo en el lenguaje Javascript. Veremos cómo los objetos pueden tener métodos compartidos incluso sin herencia.

Vamos a avanzar un poco más en la práctica de polimorfismo para llevarla a un nivel un poco más ortodoxo dentro del desarrollo orientado a objetos, creando una clase que es capaz de colaborar con distintas clases polimórficas.

Javascript es un lenguaje muy maleable con aplicaciones de polimorfismo muy variopintas. Pero para que nos quede un poco más claro el concepto de polimorfismo y la práctica en Javascript frente a lenguajes más tradicionales, vamos a explicar cómo funcionan los lenguajes tipados a la hora de hacer polimorfismo. Mencionaremos algunas cosas extra que existen en lenguajes tipados, como las clases abstractas o las interfaces, que no existen en Javascript directamente, pero que queremos que al menos hayáis oído hablar de ello para tener un conocimiento un poco más general.

Explicamos la relación de composición, viendo ejemplos prácticos y la representación en diagramas de UML.

Explicamos la relación de uso, viendo ejemplos prácticos y la representación en diagramas de UML.

Explicamos la relación de asociación y agregación, viendo ejemplos prácticos y la representación en diagramas de UML.

Vamos a ver cómo definir el modelo de dominio de un juego y cómo representar las distintas entidades con sus relaciones.

Para realizar un juego en Javascript nos vamos a apoyar en el framework Phaser. Comenzamos haciendo un repaso de las funcionalidades básicas del framework para poder entenderlo.

Veremos cómo implementar un juego con Phaser, paso por paso, aplicando todos los conceptos vistos durante este curso de orientación a objetos en Javascript.