Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pepote21 en 22 de Mayo 2017, 01:59

Título: JavaScript cómo crear clases Métodos con funciones internas y externas CU01144E#
Publicado por: Pepote21 en 22 de Mayo 2017, 01:59
Hola a todos. Presento el ejercicio CU01144E del manual de programador web con JavaScript usando Notepad++ como editor. He tenido algún follón de comprensión en el foro. Así pues, he realizado mi código, pero no sé si es el adecuado.

Gracias

Un saludo


Métodos con funciones internas

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  tutorialesprogramacionya.com</title>
        <meta charset="utf-8">
        <style type="text/css">
    body {font-family: sans-serif; text-align:center; }
            div {border-style:solid; margin:20px; padding:15px; display:inline-block;}
.boton{padding:15px; width:200px; text-align:center; clear:both; color: white; border-radius: 40px; background: rgb(202, 60, 60);}     
        </style>
        <script type="text/javascript">   
            function Medico(nombre,curadas,especialidad){
    this.nombreMedico=nombre;
this.personasCuradas=curadas;
this.especialidad=especialidad;
this.curarPersona=function(){
    this.personasCuradas++;
}
this.mostrarDatos=function(){
    var msg='El médico se llama '+this.nombreMedico+', su especialidad es '+this.especialidad;
msg=msg+' y lleva '+this.personasCuradas+' personas curadas';
alert(msg);
}
}
function crearMedico(){
    medico1=new Medico('Juan Oria','16','cardiología');
medico1.mostrarDatos();
medico1.curarPersona();medico1.mostrarDatos();
medico2=new Medico('Carlos Bermúdez','27','digestivo');
medico2.mostrarDatos();
medico2.curarPersona();medico2.mostrarDatos();
}
        </script>
    </head>
    <body>
        <div class="boton" onclick="crearMedico()">Crear objeto médico</div>
    </body>
</html>


Métodos con funciones externas

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  tutorialesprogramacionya.com</title>
        <meta charset="utf-8">
        <style type="text/css">
    body {font-family: sans-serif; text-align:center; }
            div {border-style:solid; margin:20px; padding:15px; display:inline-block;}
.boton{padding:15px; width:200px; text-align:center; clear:both; color: white; border-radius: 40px; background: rgb(202, 60, 60);}     
        </style>
        <script type="text/javascript">   
            function Medico(nombre,curadas,especialidad){
    this.nombreMedico=nombre;
this.personasCuradas=curadas;
this.especialidad=especialidad;
this.curarPersona=curarPersona;
this.mostrarDatos=mostrarDatos;

function curarPersona(){
    this.personasCuradas++;
}
function mostrarDatos(){
    var msg='El médico se llama '+this.nombreMedico+', su especialidad es '+this.especialidad;
msg=msg+' y lleva '+this.personasCuradas+' personas curadas';
alert(msg);
}
}
function crearMedico(){
    medico1=new Medico('Juan Oria','16','cardiología');
medico1.mostrarDatos();
medico1.curarPersona();medico1.mostrarDatos();
medico2=new Medico('Carlos Bermúdez','27','digestivo');
medico2.mostrarDatos();
medico2.curarPersona();medico2.mostrarDatos();
}
        </script>
    </head>
    <body>
        <div class="boton" onclick="crearMedico()">Crear objeto médico</div>
    </body>
</html>
Título: Re:JavaScript cómo crear clases Métodos con funciones internas y externas CU01144E
Publicado por: Ogramar en 24 de Junio 2017, 11:48
Buenas Pepote21

El código con funciones anónimas internas lo veo perfecto

El código con funciones externas, para atenernos a la explicación del curso, la definición de las funciones debería estar fuera de la definición de la clase, con lo que el código quedaría así:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  tutorialesprogramacionya.com</title>
        <meta charset="utf-8">
        <style type="text/css">
    body {font-family: sans-serif; text-align:center; }
            div {border-style:solid; margin:20px; padding:15px; display:inline-block;}
.boton{padding:15px; width:200px; text-align:center; clear:both; color: white; border-radius: 40px; background: rgb(202, 60, 60);}     
        </style>
        <script type="text/javascript">   
            function Medico(nombre,curadas,especialidad){
    this.nombreMedico=nombre;
this.personasCuradas=curadas;
this.especialidad=especialidad;
this.curarPersona=curarPersona;
this.mostrarDatos=mostrarDatos;


}

function curarPersona(){
    this.personasCuradas++;
}
function mostrarDatos(){
var msg='El médico se llama '+this.nombreMedico+', su especialidad es '+this.especialidad;
msg=msg+' y lleva '+this.personasCuradas+' personas curadas';
alert(msg);
}

function crearMedico(){
    medico1=new Medico('Juan Oria','16','cardiología');
medico1.mostrarDatos();
medico1.curarPersona();medico1.mostrarDatos();
medico2=new Medico('Carlos Bermúdez','27','digestivo');
medico2.mostrarDatos();
medico2.curarPersona();medico2.mostrarDatos();
}
        </script>
    </head>
    <body>
        <div class="boton" onclick="crearMedico()">Crear objeto médico</div>
    </body>
</html>

En principio de ambas formas obtenemos el mismo resultado, no obstante te animo a hacer pruebas para ver si encuentras diferencias entre el hecho de que se definan de una forma u otra.

Nota: ten cuidado porque en muchos ejercicios estás dejando etiquetas <script> ... < / script> vacías como si fuera código sin revisar que se te hubiera olvidado; en este ejercicio ya las he borrado

Salu2
Título: Re:JavaScript cómo crear clases Métodos con funciones internas y externas CU01144E#
Publicado por: Pepote21 en 24 de Junio 2017, 12:16
Hola Ogramar.
Encantado y agradecido por todo.
Sobre el script que dejó lo corregiré proximamente ya que suelo partir de un código base en el cual inicalmente poníamos scripts en el body.
Sobre la versión introducida por tí del ejercicio lo comprobaré para aprender.
Gracias y un saludo.