Programación orientada a objetos con JavaScript

Aprende a crear poderosas aplicaciones en JavaScript
4.0 (52 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
367 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 60
  • Length 8.5 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 Spanish

Course Description

JavaScript es uno de los lenguajes más difundidos en la actualizada, ya que se ejecuta en los 5 principales navegadores. Sin embargo, aunque es un lenguaje orientado a objetos, se acostumbra programar los scripts en programación funcional o estructurada.

En tiempos modernos, es necesario hacer aplicaciones más complejas y fáciles de mantener, por lo que el paradigma de la programación orientada a objetos es necesaria. Usted encontrará en este curso que es sencillo programar orientado a objetos con JavaScript, lo que permitirá hacer a usted código más limpio y mantenible.

En este curso iniciaremos desde los principios básicos de la programación orientada a objetos, definiendo lo que es herencia, encapsulamiento, polimorfismo y abstacción, que son principios generales a cualquier lenguaje de programación irientada a objetos.

Definiremos las propiedades y limitaciones del lenguaje, y cómo hacer nuestras aplicaciones orientada a objetos. Realizaremos diferentes ejemplos, como el manejo de imágenes con el canvas de HTML5, una aplicación de dibujo y otra para dibujos en mapas de bits.

Este curso no es un curso básico. Usted debe conocer previamente los principios de programación con JavaScript, como un ciclo, una condicional o una variabl, los cuales no se ven en este curso, pero no necesita ser un experto en programación. Necesitará su computadora con internet, un navegador de los cinco principales y un editor de código HTML estándar.


What are the requirements?

  • Conocimientos básicos de HTML y CSS
  • Conocimientos medios de programación en JavaScript.
  • Deseable (no indispensable) conocimientos en algún lenguaje Orientado a Objetos.

What am I going to get from this course?

  • Comprender los conceptos básicos a cualquier lenguaje orientado a objetos, como la herencia, el polimorfismo y el encapsulamiento.
  • Aplicar las diferentes funciones en JavaScript, como funciones anónimas, funciones de callback, funciones dentro de funciones y funciones que regresan funciones.
  • Crear objetos en javaScript, incluyendo métodos y propiedades, así como la forma de cambiarlos.
  • Aplicar las propiedades y métodos en prototype y comprender sus ventajas y desventajas.
  • Utilizar la herencia en JavaScript, asi como sus principales variaciones, con sus ventajas y desventajas.
  • Crear una aplicación en JavaScript utilizando un objeto como NAMESPACE.
  • Crear una aplicación que realice filtros a archivos de imágenes por medio del canvas de HTML5 bajo el paradigma de la programación orientada a objetos.
  • Crear una aplicación que dibuje formas geométricas básicas en forma aleatoria a solicitud del usuario, bajo el paradigma de la programación orientada a objetos con JavaScript.

What is the target audience?

  • Desarrolladores y diseñadores web que deseen realizar aplicaciones bajo el paradigma de la programación orientada a objetos.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

08:38

En este curso revisaremos los siguientes temas:

  • Introducción a la programación orientada a objetos.
  • Las funciones de JavaScript.
  • Los objetos en JavaScript.
  • La propiedad prototype.
  • La herencia en JavaScript.
  • El manejo de Namespace
  • Aplicación de filtros a imágenes
  • Aplicación de figuras geométricas.
Section 1: Introducción a la programación orientada a objetos con JavaScript
07:05

En este video revisaremos brevemente los orígenes y la evolución del lenguaje que estudiaremos: JavaScript.

03:26

En este video veremos en términos generales lo que es la programación orientada a objetos y su evolución.

07:12

En esta clase estudiaremos los conceptos fundamentales de clases, objetos e instancias, fundamentos de la programación orientada a objetos.

05:05

En esta clase analizaremos los elementos de una clase: las propiedades y los métodos

06:50

Los pilares de la programación orientada a objetos son la herencia, el encapsulamentos, la abstracción y el polimorfismo.

03:05

El centro de la programación orientada a objetos en JavaScript es la correcta comprensión y manejo de la propiedad prototype en las funciones.

02:29

Hay que tener muy claro la diferencia entre la programación orientada a prototipos y la programación orientada a objetos. Aunque es un discusión netamente académica, nos ayudará mucho esclarecer los conceptos.

06:11

UML es una poderosa herramienta para traficar nuestras clases y poder tener una idea clara de la aplicación, antes de iniciar la codificación.

Apuntes de la historia de JavaScript
6 pages
Apuntes de la sección Introducción a la Programación Orientada a Objetos
31 pages
Apuntes de la primera sección (Anexo)
35 pages
Section 2: Las funciones en JavaScript
04:09

Las funciones son la base de la programación orientada a objetos en JavaScript, por lo que es importante que partamos de un conocimiento firme de las mismas.

02:21

Las funciones anónimas no contienen nombre (por eso son anónimas) y las podemos asignar a variables, objetos, etcétera.

05:05

Las funciones no son otra cosa que datos asignados a una variable, por lo que pueden ser copiados, borrados y llamados como parámetros.

04:15

Otra característica de las funciones en JavaScript, es que las podemos "autoinvocar" por medio de los paréntesis, y podemos pasar valores a esta función autoinvocada con otros paréntesis al final.

Funciones anidadas en JavaScript
04:22
04:02

Otra característica de las funciones en JavaScript es que podemos regresar y ejecutar una función en la sentencia return.

04:29

Aprovechando que podemos enviar una función de regreso en otra función, esto nos permitirá redefinir esta función en tiempo de ejecución del script.

04:29

Ambas funciones sirven para llamar a otra función.En ambas, el primer parámetro debe ser el objeto propietario.

En el método call, los parámetros se pasan separados por comas.En el método apply, los parámetros se pasan como un arreglo.

35 pages

Apuntes a la sección de Funciones en JavaScript

Section 3: Los objetos en JavaScript
05:55

En JavaScript “casi” todo es un objeto.

Los valores primitivos son: cadenas, números y booleanos.

Todos lo demás son objetos: arreglos, funciones, expresiones regulares y objetos.

Los objetos son variables que contienen variables, incluso arreglos, funciones y otros objetos.

06:54

Dentro de un objeto podemos añadir cualquier variables simple, como cadena, número o boleado, pero también podemos añadir otra objetos, arreglos y funciones.

04:52

JavaScript es un lenguaje dinámico, por lo cual podemos añadir, modificar y eliminar propiedades y métodos en tiempo de ejecución.

06:57

Por medio de una función podemos hacer un "molde" donde almacenamos las propiedades y métodos para poder replicarlos en instancias. Esa es la base de las clases en JavaScript.

39 pages

Apuntes a la sección 3: Objetos en JavaScript

Section 4: La propiedad prototipo o prototype
06:57

Las funciones son objetos que tienen propiedades (arguments, prototype y constructor) y métodos (call() y apply()).

prototype es una propiedad que tiene toda función y es de tipo objeto. En un inicio es un objeto vacío.

Por medio de la propiedad prototype podemos añadir métodos y propiedades a la función de clase o constructor.

El prototipo solo se utiliza cuando utilizas a la función como función constructora.

06:38

Cuando creas una función como constructora por medio de “new”, puedes hacer referencia al mismo por medio de “this” (la cual no es una variable).

A las propiedades añadidas con “this” se les conoce como “own properties”.A las propiedades añadidas con “prototype” se les conoce como “prototype properties”.

07:04

Como el prototipo es un objeto, cualquier modificación la pueden visualizar todas las instancias, incluso si fueron creadas antes de la modificación al prototipo.

Todo lo que se encuentre en el prototipo se pasa “por referencia”, por lo tanto, no se duplica en cada instancia.En cambio en las “own properties” si se duplican en cada instancia.

07:52

JS primero busca en la función la propiedad, y si no existe la busca en el objeto prototype.

Si hay una propiedad de la función y una propiedad en el objeto prototype, la propiedad de la función tiene precedencia.

04:57

Por medio de un ciclo for...in podemos enlistar todas las propiedades de un objeto.Por medio de l función hasOwnProperty() sabemos si son propiedades del objeto (true) o del objeto prototype (false).

06:06

Por medio de un ciclo for...in podemos enlistar todas las propiedades de un objeto.Por medio de l función hasOwnProperty() sabemos si son propiedades del objeto (true) o del objeto prototype (false).

Anexo a la unidad 4: Prototype
33 pages
Section 5: La herencia en la programación orientada a objetos en JavaScript
04:45

Un objeto puede acceder a propiedades y métodos de las clases que se encuentran “arriba” dentro de la la cadena de herencias.

Podemos almacenar en prototype propiedades comunes, siempre y cuando no cambien en las diferentes instancias (constantes).

08:13

En este video veremos un ejemplo clásico de creación de objetos y de su herencia, así como algunas de sus ventajas.

06:40

Podemos “mover” las propiedades a “prototype” para que sea común a todas las instancias.Pero se puede sobreescribir la propiedad desde la instancia.

07:01

Los elementos que se comparten se almacenan en el prototipo. Por esta razón, muchas veces sólo se hereda el prototype, que es donde se debe almacenar los elementos reutilizables. Lo cual es más eficiente, pero las modificaciones son más complicadas, ya que modifican a todas las instancias de toda la cadena de herencia.

05:14

Una forma de solucionar el problema anterior es crear un constructor temporal.Con el constructor temporal se rompe la cadena de prototipos, pero se heredan los elementos entre las clases.

03:46

Herencia por medio del constructor

Herencia por medio de objetos

Usar prototipos

Copiar prototipos

Ambos

Prototype chaining (pseudo-classical)

Inherit only the prototype

Temporary constructor

Copying the prototype properties

Copy all properties (shallow copy)

Deep copy

Prototypal inheritance

Section 6: El manejo de los nombres de espacios o NAMESPACE
01:27

Se deben de evitar tener variables globales sin relación. Para ello podemos crear un objeto y almacenar ahí las propiedades y métodos globales.

A ese objeto lo llamaremos NAMESPACE y por convención se escribe en mayúsculas.Podemos hacer propiedades para agrupar eventos, texto, elementos (DOM), etc.

04:13

En este video iniciaremos con las etiquetas de HTML y los estilos en cascada necesarios para nuestra aplicación de dibujo.

06:43

En este video haremos la estructura del objeto para el NAMESPACE.

05:45

En este video escribiremos el código para detectar el canvas y su contexto en la rutina de inicio()

09:00

En este video detectaremos las coordenadas que pulse el usuario en el canvas y las ajustaremos en la función correspondiente.

09:21

En este video escribiremos la rutina de dibujo y el método onmouseup

Section 7: Aplicación de filtros en canvas de HTML 5
02:48

En este primer video daremos un vistazo a la aplicación que realizaremos en los siguientes vídeos.

05:34

En este video escribiremos las etiquetas HTML necesarias para la aplicación

07:20

En este video escribiremos las funciones constructoras que almacenarán las propiedades y los métodos de la aplicación.

06:51

En este video codificaremos los métodos inicio y cargar, con lo cual podremos visualizar las imágenes en el CANVAS de HTML5.

08:43

En este video escribiremos las rutinas de filtro y crearemos nuestro primer filtro: oscurecer

07:47

En este video escribiremos el código para el filtro negativo.

11:27

Con este video concluimos la aplicación. Escribiremos la rutina para el flip horizontal.

Section 8: Aplicacion de figuras geométricas en canvas de HTML5
08:25

En este video repasaremos la aplicación de figuras geométricas en canvas HTML5 bajo el paradigma de la programación orientada a objetos en JavaScript.

07:20

En este video escribiremos los objetos de la aplicación y la herencia entre ellos.

09:41

Con rutinas muy sencillas realizaremos los métodos de las formas básicas.

12:05

En este video escribiremos las propiedades de las formas geométricas, como triángulo, cardado, rectángulo y círculo.

09:35

Escribir el código para dibujar las formas geométricas básicas

10:03

Por medio de la función de JavaScript "setInterval", lanzaremos al método para repetir el dibujo de a forma geométrica, y así concluiremos la aplicación.

Section 9: A manera de conclusión
03:24

Con este video nos despedimos del curso de Programación Orientada a Objetos en JavaScript. Gracias y hasta pronto.

Archivos del curso Programación orientada a objetos con JavaScript
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.

Ready to start learning?
Take This Course