Comunidad de diseño web y desarrollo en internet online

Programación orientada a objetos en Javascript

Hola buenas tardes, hoy les traigo un simple pero ilustrado ejemplo de lo que es la programación orientada a objetos en javascript, vamos a realizar un ejemplo simple de cargar un objeto en Javascript y luego mostrarlo en un div con Jquery.

    La programación orientada a objetos o POO (OOP según sus siglas en inglés) es un paradigma de programación que usa objetos y sus interacciones, para diseñar aplicaciones y programas informáticos. Está basado en varias técnicas, incluyendo herencia, abstracción, polimorfismo y encapsulamiento. Su uso se popularizó a principios de la década de los años 1990. En la actualidad, existe variedad de lenguajes de programación que soportan la orientación a objetos.
    De la Wikipedia.


Código Html

Código :

<div id="infousuario"><div>

Codigo Javascript

Código :

var usuario = function (a){
    this.nombres=a;
    this.setEdad = function(value){
        this.edad=value;
    }
    this.setHtml = function(){
        $('#infousuario').html('Nombres:'+ this.nombres + ' Edad:' + this.edad);
    }
};

$(document).ready(function(){
    u =  new usuario('Andres');
    u.setEdad(18);
    u.setHtml();
});


Explicación del Código Javascript


Código :

var usuario = function (a){
    this.nombres=a;
    this.setEdad = function(value){
        this.edad=value;
    }
    this.setHtml = function(){
        $('#infousuario').html('Nombres:'+ this.nombres + ' Edad:' + this.edad);
    }
};

Detalle: En este código, creamos un objeto llamado usuario, el cual recibe un parametro por referencia esto se le puede llamar el constructor del objeto, luego posee una variable llamada nombre que es asignada con el valor por referencia de la variable a. Luego declaramos dos metodos setEdad y setHtml.


  • setEdad asigna el valor al atributo edad de nuestro objeto.
  • setHtml nos muestra el objeto en nuestro html utilizando jquery.


Código :

$(document).ready(function(){
    u =  new usuario('Freddie');
    u.setEdad(40);
    u.setHtml();
});

Detalle: En este código se ejecutará al cargar la página, se creará un objeto usuario, se le asigna una edad de 40 y se llama al método setHtml para mostrar el resultado.

Este es un pequeño ejemplo de Programación Orientada a Objetos en Javascript espero que les ayude en algo y que migren sus funciones a la POO.

Saludos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate