155 lines
4.1 KiB
HTML
155 lines
4.1 KiB
HTML
<!Doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>OBJETOS JAVASCRIPT</title>
|
|
<script type="text/javascript">
|
|
|
|
|
|
// Definir objetos
|
|
//Metodo1
|
|
var miCoche = {
|
|
marca: "Ford",
|
|
modelo: "Mustang",
|
|
ano: 1969
|
|
};
|
|
|
|
//Metodo2
|
|
var miCoche2 = new Object();
|
|
miCoche2.marca = "Seat";
|
|
miCoche2.modelo = "2CV";
|
|
miCoche2.ano = 1969;
|
|
|
|
// Objeto vacio
|
|
var miCoche3={};
|
|
|
|
//Acceso a Propiedades
|
|
console.log(miCoche2.marca); // Imprime "Seat"
|
|
console.log(miCoche2['modelo']); // Imprime "2CV"
|
|
|
|
|
|
// Agregar propiedades
|
|
miCoche.color="white";
|
|
miCoche.peso="2000kg";
|
|
|
|
// Eliminar propiedades
|
|
delete miCoche.color;
|
|
|
|
|
|
// Definir una clase mediante función constructora
|
|
function Usuario(nombre, contraseña, email, alta) {
|
|
this.nombre=nombre;
|
|
this.contraseña =contraseña;
|
|
this.email =email;
|
|
this.alta=alta;
|
|
// Métodos del objeto
|
|
this.mostrarUsuario=function() {
|
|
var datos= "Nombre de usuario: "+this.nombre+"\n"+"E-mail: "+this.email +"\n"+ "Fecha alta: "+this.alta;
|
|
return datos;
|
|
};
|
|
}
|
|
|
|
// Otra manera de definir una clase, ECMAScript 6 y posterior
|
|
|
|
var Individuo=class {
|
|
constructor(nombre,contraseña,email,alta) {
|
|
this.nombre=nombre;
|
|
this.contraseña =contraseña;
|
|
this.email =email;
|
|
this.alta=alta;
|
|
this.metodo=function() { return "Hola"; }
|
|
}
|
|
}
|
|
|
|
|
|
// Creamos un objet(Instancia de una clase)
|
|
usuario1 =new Usuario( "manolo15", "1357ade", "manologarcia@gmail.com","2019");
|
|
usuario2 =new Usuario( "paco15", "1345", "pacogarcia@gmail.com","2018");
|
|
|
|
|
|
// Añadir una nueva propiedad al prototipo de la clase
|
|
Usuario.prototype.telefono = null;
|
|
|
|
// Creamos una instancia
|
|
usuario3 =new Usuario( "Lucas", "laquesea", "lucaslaq@gmail.com","2028");
|
|
// Asignar un valor a la nueva propiedad en una instancia
|
|
usuario1.telefono = "555-1234";
|
|
|
|
|
|
// Función para el ejemplo del html
|
|
function alerta(usuario){
|
|
alert(usuario.mostrarUsuario());
|
|
}
|
|
|
|
|
|
|
|
///Ejemplo
|
|
// Definir una clase Producto
|
|
var Producto = class {
|
|
constructor(precio, tipo, stock) {
|
|
this.precio = precio;
|
|
this.tipo = tipo;
|
|
this.stock = stock;
|
|
}
|
|
|
|
// Método incluido en la creación de la clase
|
|
mostrarProducto() {
|
|
let datos = "Precio: " + this.precio + "\nTipo: " + this.tipo + "\nStock: " + this.stock;
|
|
return datos;
|
|
console.log(datos);
|
|
}
|
|
};
|
|
|
|
|
|
// Crear 2 instancias de la clase Producto
|
|
var Producto1 = new Producto(10, "suministro", true);
|
|
var Producto2 = new Producto(20, "repuesto", false);
|
|
var Producto3 = new Producto(undefined, "repuesto", false);
|
|
var Producto4 = new Producto(5, "repuesto", undefined);
|
|
|
|
// Llamar al método mostrarProducto para cada instancia
|
|
//Producto1.mostrarProducto();
|
|
//Producto2.mostrarProducto();
|
|
//Producto3.mostrarProducto();
|
|
console.log(Producto4.mostrarProducto());
|
|
|
|
// Función para el ejemplo del html
|
|
function alertaProducto(Producto){
|
|
alert(Producto.mostrarProducto());
|
|
}
|
|
|
|
// Añadimos una nueva propiedad a Producto1
|
|
Producto1.oferta=true;
|
|
|
|
//Producto1.oferta=false;
|
|
// Iterar sobre las propiedades de Producto1 con for ... in
|
|
console.log("Propiedades de Producto1:");
|
|
for (var clave in Producto1) {
|
|
console.log(clave + ': ' + Producto1[clave]);
|
|
}
|
|
|
|
// Object.keys(obj) itera sobre el objeto y devuelve sus propiedades o keys.
|
|
console.log("Keys de Producto1:", Object.keys(Producto1));
|
|
|
|
// Object.values(obj) itera sobre el objeto y devuelve los valores de sus propiedades.
|
|
console.log("Values de Producto2:", Object.values(Producto2));
|
|
|
|
// Object.entries(obj) itera sobre el objeto y devuelve los pares [key, valor].
|
|
console.log("Entries de Producto1:", Object.entries(Producto1));
|
|
|
|
// Object.fromEntries(array) construye un objeto a partir de un array de pares [key, valor].
|
|
var objetoDesdeArray = Object.fromEntries(Object.entries(Producto2));
|
|
console.log("Objeto construido desde array:", objetoDesdeArray);
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<span onclick= "alerta(usuario1);">Pulsa aquí para ver a usuario1</span><br>
|
|
<br>
|
|
<span onclick= "alerta(usuario2);">Pulsa aquí para ver a usuario2</span><br>
|
|
<br>
|
|
<span onclick= "alertaProducto(Producto1);">Pulsa aquí para ver a producto1</span><br>
|
|
|
|
</body>
|
|
</html> |