Programación orientada a objetos con JavaScript
4.3 (82 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.
475 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Programación orientada a objetos con JavaScript to your Wishlist.

Add to Wishlist

Programación orientada a objetos con JavaScript

Aprende a crear poderosas aplicaciones en JavaScript
4.3 (82 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.
475 students enrolled
Last updated 5/2016
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 1 Article
  • 7 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
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.
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.


Who is the target audience?
  • Desarrolladores y diseñadores web que deseen realizar aplicaciones bajo el paradigma de la programación orientada a objetos.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
60 Lectures
08:29:38
+
Bienvenida al curso de programación orientada a objetos con JavaScript
1 Lecture 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.
Preview 08:38
+
Introducción a la programación orientada a objetos con JavaScript
11 Lectures 41:23

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

Preview 07:05

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

¿Qué es la programación orientada a objetos?
03:26

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

Clases, objetos e instancias
07:12

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

Elementos de una clase: las propiedades y los métodos
05:05

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

Los pilares de OOP: Herencia, Polimorfismo, encapsulamiento y abstracción
06:50

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.

La propiedad prototipo o prototype
03:05

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.

Programación orientada a prototipos
02:29

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.

La herramienta UML
06:11

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
+
Las funciones en JavaScript
9 Lectures 33:12

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.

Preview 04:09

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

Funciones anónimas en JavaScript
02:21

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

Funciones de callback en JavaScript
05:05

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 que se autoinvocan en JavaScript
04:15

Funciones anidadas en JavaScript
04:22

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

Funciones que regresan funciones en JavaScript
04:02

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.

Redefinir una función en tiempo de ejecución
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.

Los métodos call y apply de las funciones en JavaScript
04:29

Apuntes a la sección de Funciones en JavaScript

Apuntes a la sección de Funciones en JavaScript
35 pages
+
Los objetos en JavaScript
5 Lectures 24:38

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.

Preview 05:55

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.

Los elementos, las propiedades y los métodos en los objetos
06:54

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

Añadir y eliminar métodos y propiedades en un objeto en JavaScript
04:52

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.

La función constructora o función de clase en JavaScript
06:57

Apuntes a la sección 3: Objetos en JavaScript

Apuntes a la sección 3: Objetos en JavaScript
39 pages
+
La propiedad prototipo o prototype
7 Lectures 39:34

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.

Preview 06:57

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”.

Añadir propiedades a prototype
06:38

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.

Acceder a las propiedades y métodos del prototipo
07:04

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.

Cadena de prototipos: propiedades de función vs. propiedades de prototipo
07:52

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).

Sobreescribir una propiedad prototipo
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).

Enumerar las propiedades de una instancia
06:06

Anexo a la unidad 4: Prototype
33 pages
+
La herencia en la programación orientada a objetos en JavaScript
6 Lectures 35:39

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).

Preview 04:45

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

Un ejemplo de herencia en JavaScript
08:13

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

Mover las propiedades y métodos al prototype
06:40

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.

Herencia: copiar sólo los prototipos
07:01

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.

Heredar en JavaScript por medio de un constructor temporal
05:14

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

Sumario de modos de herencia en JavaScript
03:46
+
El manejo de los nombres de espacios o NAMESPACE
6 Lectures 36:29

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.

Preview 01:27

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

Crear las etiquetas HTML del canvas para la aplicación
04:13

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

La estructura del objeto base del NAMESPACE
06:43

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

Crear la rutina de validación del canvas en el objeto principal
05:45

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

Detectar las coordenadas y ajustarlas al canvas
09:00

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

La rutina de dibujo y finalizar de dibujar con mouseup
09:21
+
Aplicación de filtros en canvas de HTML 5
7 Lectures 50:30

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

Preview 02:48

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

Crear las etiquetas HTML para la aplicación de imágenes con HTML5
05:34

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

Crear las funciones constructoras de la aplicación
07:20

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

Escribir los métodos de inicio y de carga de las imágenes en el canvas de HTML5
06:51

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

Escribir los métodos filtro, limpiar y crear el primer filtro: oscurecer
08:43

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

Escribir el filtro negativo
07:47

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

Finalizar la aplicación con el filtro Flip Horizontal
11:27
+
Aplicacion de figuras geométricas en canvas de HTML5
6 Lectures 57:09

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.

Preview 08:25

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

Escribir los objetos de la aplicación de figuras geométricas
07:20

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

Escribir la mayoría de los métodos y el contenido de los objetos
09:41

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

Escribir las propiedades de las formas geométricas
12:05

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

Escribir los métodos para dibujar las formas básicas
09:35

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.

Generar el setInterval y limpiarlo a solicitud del usuario.
10:03
+
A manera de conclusión
2 Lectures 03:26

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

Preview 03:24

Archivos del curso Programación orientada a objetos con JavaScript
00:02
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
977 Reviews
12,840 Students
34 Courses
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.