Autor Tema: JavaScript cómo crear clases Métodos con funciones internas y externas CU01144E# (Leído 1983 veces)

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>

Ogramar · « **Respuesta #1 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

Pepote21 · « **Respuesta #2 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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: