Juan David Sánchez
Anfernee Valera
Muy bueno tu código, lo utilicé como referencia.
Juan Camilo Salazar
Excelente código, también me sirvió de inspiración para hacer mi código. :fri
¿Cómo crear objetos literales en JavaScript y qué ventajas ofrecen?
Cuando comienzas a programar en JavaScript, una de las primeras estructuras de datos que aprendes a manejar son los objetos literales. Un objeto literal es una simple lista de pares clave-valor que crea un objeto con ciertas propiedades directamente, sin la necesidad de una clase.
Ejemplos de creación de objetos literales
Consideremos este ejemplo básico para crear un estudiante en Platzi:
const juan1 = { nombre: "JuanDC", username: "juandc", platziRank: 100, socialMedia: { twitter: "fjuandc", instagram: "fjuandc", facebook: undefined }, approvedCourses: ["Curso Definitivo de HTML y CSS", "Curso Práctico de HTML y CSS"], learningPaths: [ { nombre: "Escuela de Desarrollo Web", courses: [ "Curso Definitivo de HTML y CSS", "Curso Práctico de HTML y CSS", "Curso de Responsive Design" ] }, { nombre: "Escuela de Videojuegos", courses: ["Introducción a la Producción de Videojuegos", "Curso de Unreal Engine", "Curso de Unity 3D"] } ] };
¿Cuáles son las limitaciones de los objetos literales?
Si bien los objetos literales son efectivos para estructuras simples de datos, presentan ciertas limitaciones cuando el proyecto crece o se vuelve más complejo:
¿Cómo se usan las clases para crear instancias en JavaScript?
Para solucionar las limitaciones de los objetos literales, JavaScript ofrece las clases, una característica más reciente que permite la reutilización y escalabilidad de código mediante la creación de múltiples instancias a partir de una plantilla de clase.
Ejemplo de clase Student
Crear clases te permite definir una estructura de datos y comportamiento funcional para objetos similares. Aquí tienes un ejemplo de cómo crear una clase Student:
class Student { constructor({ name, email, username, twitter = undefined, instagram = undefined, facebook = undefined, approvedCourses = [], learningPaths = [] }) { this.name = name; this.email = email; this.username = username; this.socialMedia = { twitter, instagram, facebook, }; this.approvedCourses = approvedCourses; this.learningPaths = learningPaths; } } const juan2 = new Student({ name: "JuanDC", username: "juandc", email: "juanito@juanito.com", twitter: "fjuandc", }); const miguelito2 = new Student({ name: "Miguelito", username: "miguelito_feliz", email: "miguelito@juanito.com", instagram: "miguelito_feliz" });
Ventajas de usar clases en JavaScript
¿Por qué usar programación orientada a objetos?
La programación orientada a objetos (OOP) es más que solo escribir menos líneas de código; permite estructurar tus datos de una manera que es más cercana a cómo piensas sobre modelos del mundo real.
Animo a que sigas explorando más sobre este poderoso paradigma de programación, adoptando mejores prácticas que comparten las industrias de tecnología actuales y haciéndote un programador más eficiente y efectivo.
Juan David Sánchez
Anfernee Valera
Muy bueno tu código, lo utilicé como referencia.
Juan Camilo Salazar
Excelente código, también me sirvió de inspiración para hacer mi código. :fri
Sebastián Andrés Sanhueza Tapia
Alguno de los atajos de teclado son estos . ++Escribir en varios lados a la vez++ alt + click
++Mover una línea hacia arriba y abajo++ alt + flecha hacia arriba (o flecha hacia abajo)
++Copiar una línea hacia arriba o abajo++ alt + shift + flecha hacia arriba (o flecha hacia abajo)
++Borrar una línea completa a la vez++ shift + supr
Sebastián Arredondo Posada
Thanks, this is very useful!
Alejandro Zambrano Lasso
amigo pero en MACBook como son los atajos...cuando se le pone this a varios...en el min 9:27 como es?...muchas gracias de antemano
class LearningPath { constructor({ name, courses = [], }) { this.name = name; this.courses = courses; } } const escuelaWeb = new LearningPath({ name: "Escuela de Desarrollo Web", courses: [ cursoJS, cursoReact, cursoNextJS, ], }); const escuelaData = new LearningPath({ name: "Escuela de Data Science", courses: [ cursoPython, CursoMatematicas, CursoExcel, ], });
Luis Angel Hipólito Marquez
Para los que no conocen el atajo que uso es: Alt + shift y seleccionar al principio de cada linea.
Emma Rosa Pilozo Solano
Muchas Gracias por su aporte.
Orlando Díaz Torrealva
También se puede usar las flechas del teclado si la otra línea está inmediatamente debajo o encima.
Valentina Arenas Lozano
¿Quién usa Facebook hoy en día? xD el bullying a los de Facebook. Yo dejé de usarlo hace como un año, es una perdedera de tiempo, a menos que sea para marketing 😋
Eliaz Bobadilla
Yo nunca lo llegue a usar porque no me gusta su Interfaz xD
Gonzalo Vidal
Prácticamente todo el mundo xd, mas bien nosotros somos la minoría que dejamos de usar
Andrés Felipe Rivera Lozano
Cuando dicen que nadie usa Facebook...
Darly Lozano Cruz
Pueden hacer un "console.table(Student)" y miren como les explota la cabeza con eso xD
Juan Castro
ProfesorUffffff
Valentina Arenas Lozano
Ederson Felipe Lopez Bolivar
no se si este en lo correcto pero teachers no seria un atributo de LearningPath sino de los cursos como tal no?
Ruben Dario Hernandez Centeno
Esta bien tu proyecto, pero debes hacer modular tu codigo, como lo haces? usas la herencia POO, y ahi no se esta aplicando... Podrias hacer un:
class teacher extends learningPath {}
José Gregorio Estrada Meneses
Ventajas de la Programación Orientada a Objetos
Reusabilidad. Cuando hemos diseñado adecuadamente las clases, se pueden usar en distintas partes del programa y en numerosos proyectos.
Mantenibilidad. Debido a las sencillez para abstraer el problema, los programas orientados a objetos son más sencillos de leer y comprender, pues nos permiten ocultar detalles de implementación dejando visibles sólo aquellos detalles más relevantes.
Modificabilidad. La facilidad de añadir, suprimir o modificar nuevos objetos nos permite hacer modificaciones de una forma muy sencilla.
Fiabilidad. Al dividir el problema en partes más pequeñas podemos probarlas de manera independiente y aislar mucho más fácilmente los posibles errores que puedan surgir.
La programación orientada a objetos presenta también algunas desventajas como pueden ser:
Cambio en la forma de pensar de la programación tradicional a la orientada a objetos.
La ejecución de programas orientados a objetos es más lenta.
La necesidad de utilizar bibliotecas de clases obliga a su aprendizaje y entrenamiento.
Carlos Esteban Lara Gil
Bro, muchas gracias
Sebastian Vizcarra
Chale, yo uso Facebook por los memes :c
Miguel Ángel Baquero Tello
Fernando Pioli Martínez
Muchas gracias!
Marlón Andrés Cuartas Aguirre
Miguel, muchas gracias por tu aporte, fue de gran ayuda.
Rubén Ernesto Aragón Gil
Zuckerberg al enterarse que nadie usa Failsbuckg
Aaron Santiago Loyo Zabala
Pobre Marcos Zuquerbal :v
Pedro Alvarado Garcia
Daniel Quispe
despues de haver pausado el video 28 veces por fin consegui copiar el codigo. y despues del minuto 6:55 😱️😱️😱️😱️ aksjghlvkjfh lasjkdhflkajsghalkjh
Juan Castro
ProfesorJejejejejeje
Jesus Martinez
el tip es ver la clase completa para tratar de internalizar y luego volverla a ver para capitular lo necesario.. y luego otra mirada para entender bien jaja
Edgar Ramón González Contreras
Juan Castro
Profesor¡Muy bien! Más adelante vamos a estudiar los Módulos de ES6 para aplicar encapsulamiento a nivel de archivos :muscle:
MIguel Oviedo
No estoy seguro de que funcione el
learningPaths: [rutaIngles]
de la instancia "edgar"
Erick Alejandro Graterol Barico
Acaun aporte de mi parte. Como sabran mozilla developer es la pagina donde esta la mayor documentacion de desarrollo web y tecnologias en internet // Articulo para principiante de POO JS > https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object-oriented_JS
Anfernee Valera
Si no te ha quedado claro las ventajas de la POO, aquí te dejo 3.
Marco Palacios Orihuela
Me dio mucha gracia lo que el profe dijo: "Quien tiene Facebook hoy en día"? , es verdad, creo que ya nadie usa Facebook, y los que lo siguen usando, lo usan solo porque hace recordar la fecha de cumpleaños de tus amigos.
Cristian Antezana Novillo
Alguien Sabe por que dice nadie utiliza facebook jajajajajajajajajajajjajaj
Juan Castro
ProfesorSolo es un chiste :sweat_smille:
Pero sí es verdad que no uso Facebook a menos que tenga que hacer campañas para marketing digital o Bots con Messenger. 🤷
Ismael Cruz Procel
Seguramente Facebook lo sabe :D
Jhoana España Urresty
¿Cómo sería el cod en HTML para recibir esta información por medio de un Input?
Gracias
Ederson Felipe Lopez Bolivar
En este curso te enseñan como conectar html y JS para manipar el dom:
Jhoana España Urresty
edex13 Muchas Gracias
class Course { constructor({ id, name, teacher, lessons = [], }) { this.id = id; this.name = name; this.teacher = teacher; this.lessons = lessons; } } class LearningPath { constructor({ id, name, courses = [], }) { this.id = id; this.name = name; this.courses = courses; } addCourse(course) { this.courses.push(course); } replaceCourse(oldCourse, newCourse) { const oldCourseIndex = this.courses.findIndex(course => course.id === oldCourse.id); if (oldCourseIndex !== -1) { this.courses[oldCourseIndex] = newCourse; } return this.courses; } deleteCourse(oldCourse) { const courseIndex = this.courses.findIndex(course => course.id === oldCourse.id); this.courses.splice(courseIndex, 1); return this.courses; } } const reactNativeLearningPath = new LearningPath({ id: 'react-native', name: 'Desarrollo de Apps con React Native', courses: [ new Course({ id: 'basico-javascript', name: 'Curso Básico de JavaScript', teacher: 'Diego De Granda', }), new Course({ id: 'ecmascript-6', name: 'Curso de ECMAScript 6+', teacher: 'Orlando Naipes', }), // etc... ] })
Como proyecto personal estoy haciendo algo relacionado con Platzi, por lo que quise aprovechar el curso para ir un poco más allá. La clase LearningPath la creé considerando la información que aparece en la presentación de las rutas. Dejo mi código.
class LearningPath { constructor({ id, logo, name, teachers = [], blogposts = [], glosary = [], category, description, levels = [], }) { this.id = id; this.logo = logo; this.name = name; this.teachers = teachers; this.blogposts = blogposts; this.glosary = glosary; this.category = category; this.description = description; this.levels = levels; } addCourse(level, nameCourse) { if (!this.levels[level]) { this.levels[level] = []; } this.levels[level].push(nameCourse); } addTeacher(teacher){ this.teachers.push(teacher) } addBlog(blog){ this.blogposts.push(blog) } addConcept(concept){ this.glosary.push(concept) } }
Hola a todos, les comparto mi aporte:
// cursos class Courses { constructor({ name, teacher, ranking, level }) { (this.name = name), (this.teacher = teacher); this.ranking = ranking; this.level = level; } } const basicoJS = new Courses({ name: "Curso Practico de JavaScript", teacher: "Juan David Castro", ranking: 4.7, level: "medium", }); const practicoJS = new Courses({ name: "Curso Basico de JavaScript", teacher: "Diego De Granda", ranking: 4.6, level: "medium", }); const basicoPython = new Courses({ name: "Curso Basico de Python", teacher: "Oscar Manuel", ranking: 3.7, level: "beginer", }); const avanzadoPython = new Courses({ name: "Curso Avanzado de Python", teacher: "Freddy Vega", ranking: 4.1, level: "advanced", }); // learning paths class LearningPaths { constructor({ name, courses }) { this.name = name; this.courses = courses; } } const escuelaJS = new LearningPaths({ name: "Escuela de JavaScript", courses: [basicoJS, practicoJS], }); const escuelaDataScience = new LearningPaths({ name: "Escuela de Data Science", courses: [basicoPython, avanzadoPython], }); // students class Student { constructor({ name, email, username, twitter = undefined, instagram = undefined, facebook = undefined, approvedCourses = [], learningPaths = [], }) { this.name = name; this.email = email; this.username = username; this.socialMedia = { twitter, instagram, facebook, }; this.approvedCourses = approvedCourses; this.learningPaths = learningPaths; } } const juan = new Student({ name: "JuanDC", username: "juandc", email: "juanito@juanito.com", twitter: "fjuandc", learningPaths: [escuelaDataScience], }); const miguel = new Student({ name: "Miguelito", username: "miguelitoFeliz", email: "miguelito@juanito.com", instagram: "miguelito_Feliz", approvedCourses: [basicoJS, basicoPython], learningPaths: [escuelaJS, escuelaDataScience], });
Aquí está mi solución al reto:
class LearningPath { constructor({ name, courses, }) { this.name = name; this.courses = courses; } addCourse(nombreCurso) { this.courses.push(nombreCurso); } deleteCourse(nombreCurso) { indexCourse = this.courses.indexOf(nombreCurso); this.courses.pop(indexCourse); } } const escuelaWeb = new LearningPath({ name: "Escuela de Desarrollo Web", courses: [ "Curso Definitivo de HTML y CSS", "Curso Practico de HTML y CSS", "Curso de Responsive Design" ] }); const escuelaDataScience = new LearningPath({ name: "Escueala de Data Science", courses: [ "Curso de Análisis de Negocios para Ciencia de Datos", "Curso de Tableau", "Curso de Principios de Visualización de Datos para Business Intelligence" ] }); const escuelaVgs = new LearningPath({ name: "Escuela de Videojuegos", courses: [ "Curso de Creación de Videjuegos", "Curso de Diseño de Videojuegos", "Curso Profesional de Diseño de Videojuegos", ] });```
Ah modo de reto, me propuse separar todas las clases en archivos diferentes, esto con la finalidad de que el codigo sea mas facil de leer y no se sature en un solo archivo... Se los comparto:
Cambio 1:
Primero vamos a tu html y agregas esta propiedad al script para que cargue el js. type="module", quedando de la siguiente manera:
<script type="module" src="./src/Ventajas/main.js"></script>
Paso 2:
Dividimos el codigo en pedacitos mas pequeños que armaremos, para ello creamos 4 archivos, los cuales seran: Student, LearningPath, Course y main, y su estructura es:
Student,js
export default class Student { constructor({ name, username, points, approvedCourses = [], learningPaths = [], twitter = undefined, facebook = undefined, instagram = undefined, }) { this.name = name; this.username = username; this.points = points; this.approvedCourses = approvedCourses; this.learningPaths = learningPaths; this.socialMedia = { twitter, facebook, instagram, }; } }
El siguiente es Course.js:
export default class Student { constructor({ name, username, points, approvedCourses = [], learningPaths = [], twitter = undefined, facebook = undefined, instagram = undefined, }) { this.name = name; this.username = username; this.points = points; this.approvedCourses = approvedCourses; this.learningPaths = learningPaths; this.socialMedia = { twitter, facebook, instagram, }; } }
Agregamos a LearningPath.js:
export default class LearningPath { constructor({ id, name, description, category, courses = [] }) { this.id = id; this.name = name; this.category = category; this.description = description; this.courses = courses; } addCourse(newCourse) { this.courses.push(newCourse); } }
Esto lo debemos agregar y trabajar en el main.js:
import Course from "./Course.js"; import LearningPath from "./LearningPath.js"; import Student from "./Student.js"; const inglesBasico = new Course({ id: 1, name: "Curso Ingles basico", teacher: "Juan Perez", lessons: 23, }); console.log(inglesBasico); const rutaIngles = new LearningPath({ id: 1, name: "Escuela Ingles", description: "Ganate tu primer B1", category: "Ingles", courses: [inglesBasico], }); console.log(rutaIngles); const edgar = new Student({ name: "Edgar Gc", username: "edgargc026", points: 2000, learningPaths: [rutaIngles], approvedCourses: ["Curso Definitivo HTML y CSS", "Curso Practio HTML y CSS"], }); console.log(edgar);
Y de esta manera puedes tenerlo mas acomodado c: