Ing. Honoria Reyes Macedo
INTRODUCCION
Casi todas las cosas en javascript son objetos. Es Programacion
basada en prototipos, el prototipo es un objeto abstracto. Es un estilo de
programación sin clases, utiliza funciones como clases. ECMASCRIPT: es basado
en prototipos por lo que lo convierte en OOP(Object Oriented Programing).
Hay 2 formas de definir la función constructora:
Definir una función à function person4(nomb, corr) {this.name
= nomb; this.mail = corr;}
Definir una variable à var person4=function (nomb, corr) {this.name
= nomb; this.mail = corr;}
Prototype:
Cada objeto JavaScript tiene un prototipo. El prototipo es también
un objeto.
Todos los objetos JavaScript heredan sus propiedades y métodos de
su prototipo.
Person4.prototype.name = function() { return this.name
+ " " + this.mail;};
Metodos:
Los métodos JavaScript son las acciones que se pueden realizar en
los objetos. Un método JavaScript es una propiedad que contiene una definición
de función.
Ejemplos:
Los métodos son funciones almacenadas como propiedades del objeto
var person = {
name: "Paul",
mail : "Mi@hot",
datos: function() {
return this.name + " " + this.mail; }};
document.getElementById("demo").innerHTML
= person. datos ();
Se púede agregar un metodo a un objeto:
var myFather = new
Person4("John", "Di@hot");
myFather.datos2 =
function () { return this.name + " " + this.mail; };
document.getElementById("demo").innerHTML
= person. Datos2 ();
ACTIVIDAD:
Formas para crear un objeto en
javascript
1.- Crear un
objeto simple usando una literal
2.- Crear un
objeto simple con la palabra clave new
3.- Definir
objeto constructor y crear objetos de el
1.- Cargar valores default
en el formulario usando la primer opcion
1.1Crear
una funcion person() con valores default para mi formulario
Ejemplo:
var person = {
nombre : "John",
correo
: "Doe@fia.com",
url
: https:/mi,
fecha
: "01/08/2017"
};
1.2
Crear una funcion cargavalores() para cargar los
valores de la funcion anterior:
Tomando en cuenta
el id de cada control del formulario, por ejemplo
Nombre: <input type="text"
name="minombre" id="miNombre" onFocus="foco(this);" onBlur="no_foco(this);"
autofocus />
Observar que el id que se ocupara de cada control
function cargavalores(){
document.getElementById("miNombre").value
=person. nombre
}
1.3LLamar
la funcion desde que se carga la pagina html
Ejemplo:
<body
onLoad="cargavalores()">
2.- Mostrar los datos de
pantalla ya modificados, en la parte de abajo del formulario,
2.1 Crear una funcion MostrarCambios(forma)
function
MostrarCambios(forma){
var
person2 = new Object();
person2.nombre
= document.getElementById("miNombre").value;
person2.
correo = document.getElementById("miCorreo
").value
document.getElementById("demo1").innerHTML =person2.nombre +
" correo: " + person2.correo
}
2.2 Agregar un boton
<input
type="button" value="Mostrar los cambios" onClick
="MostrarCambios(this.form)" />
2.3 Agregar un esppacio para
mostrar los datos
<br />
<p
id="demo1"
>bbbbbbbbbb</p>
3.- Utilizar la funcion person3(nomb, corr, url) en
tu formulario y menciona porque la utilizarias.
function person3(nomb, corr, url) {
this.nombre = nomb;
this.correo = corr;
this.url = url;
}
var myFather = new person3("John", "Doe@d.com", "https:/suurl");
var myMother = new person3("Sally", "Rally@d.com", "https:/miurl");
this.nombre = nomb;
this.correo = corr;
this.url = url;
}
var myFather = new person3("John", "Doe@d.com", "https:/suurl");
var myMother = new person3("Sally", "Rally@d.com", "https:/miurl");
utiliza el prototype:
Person3.prototype.name = function() {
return this.nombre + " " + this.correo;
};
return this.nombre + " " + this.correo;
};
var
myFather = new Person3("John", "Doe@ww","https:/blue");
document.getElementById("demo").innerHTML =
"My
father is " + myFather.name();
ooooooooooooooooooooo0oo0ooooooooooooooo
ooooooooooooooooooo000oo000ooooooooooooo
No hay comentarios.:
Publicar un comentario