Dia 34
This commit is contained in:
Marcos Lopez
155
Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html
Normal file
155
Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!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>
|
||||
101
Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html
Normal file
101
Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OBJETO DATE JAVASCRIPT</title>
|
||||
<script type="text/javascript">
|
||||
|
||||
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
||||
|
||||
var dias = ["Domingo","Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
|
||||
|
||||
|
||||
// Bibliotecas de objetos javascript
|
||||
|
||||
// Clase Date valores del tipo fecha
|
||||
// Fecha de hoy
|
||||
//new Date() Tue Jan 23 2024 19:13:13 GMT+0100
|
||||
//Date.now() hora actual en milisegundos desde el 1 de Enero de 1970, 00:00:00 UTC
|
||||
|
||||
|
||||
/*
|
||||
getDate() Devuelve el día del mes.
|
||||
getDay() Devuelve el día de la semana.(lunes 1, martes 2, ...)
|
||||
getHours() Retorna las horas. En 24H.
|
||||
getMinutes() Devuelve los minutos.
|
||||
getMonth() Devuelve el mes (atención al mes que empieza por 0 Enero).
|
||||
getSeconds() Devuelve los segundos.
|
||||
getTime() Devuelve los milisegundos desde 1970
|
||||
getFullYear() Retorna el año con 4 dígitos.
|
||||
-----
|
||||
setDate() Actualiza el día del mes.
|
||||
setHours() Actualiza la hora.
|
||||
setMinutes() Cambia los minutos.
|
||||
setMonth() Cambia el mes.
|
||||
setSeconds() Cambia los segundos.
|
||||
setTime() Actualiza la fecha completa en milisegundos
|
||||
setFullYear() Cambia el año 4 dígitos
|
||||
*/
|
||||
|
||||
var fechahoy=new Date();
|
||||
var fechaM=Date.now();
|
||||
document.write( "hoy es "+fechahoy);
|
||||
document.write("<br>");
|
||||
document.write( "hoy es "+fechaM);
|
||||
document.write("<br>");
|
||||
document.write(Date.now());
|
||||
document.write("<br>");
|
||||
// Fijar una fecha
|
||||
//miFecha = new Date(año,mes,dia,hora,minutos,segundos,milisegundos)
|
||||
//miFecha = new Date(año,mes,dia)
|
||||
var fecha =new Date(2020,5,1); //En UTC sin tener en cuenta la diferencia horaria
|
||||
var fecha2 = new Date("2020-06-01");
|
||||
var fecha3 = new Date("2020-06-01T00:00:00Z");
|
||||
//console.log(fecha,fecha2);
|
||||
//console.log(fecha.toISOString()); // "2020-06-01T00:00:00.000Z"
|
||||
//console.log(fecha2.toISOString()); // "2020-06-01T00:00:00.000Z"
|
||||
//console.log(fecha3.toISOString()); // "2020-06-01T00:00:00.000Z"
|
||||
|
||||
// Pasar a milisegundos
|
||||
var milFe=fecha.getTime();
|
||||
document.write("<br>fecha " +fecha);
|
||||
document.write("<br>");
|
||||
document.write("<br>fecha " +milFe);
|
||||
document.write("<br>");
|
||||
document.write(" <br>este mes es "+meses[fecha.getMonth()]) ;
|
||||
document.write("<br>");
|
||||
document.write("<br> Hoy es "+dias[fechahoy.getDay()]);
|
||||
document.write("<br>");
|
||||
var date = new Date(872817240000);
|
||||
document.write("<br>"+date);
|
||||
document.write("<br>");
|
||||
|
||||
// valueAsNumber sacar fecha de input "date" en milisegundos
|
||||
//salida=document.getElementById("fecha").valueAsNumber;
|
||||
|
||||
// .toDateString() Devuelve formato sólo de fecha: Fri Aug 24 2018
|
||||
// .toLocaleDateString() Idem al anterior, pero en el formato regional actual: 24/8/2018
|
||||
|
||||
// Clase Math: permite representar y realizar cálculos matemáticos
|
||||
// max y min para valor máximo y minimo
|
||||
document.write("valor máximo "+Math.max(7,3,9)) ;
|
||||
document.write("<br>");
|
||||
// round redondeo
|
||||
document.write("<br>valor redondeado con ROUND "+ Math.round(7.43));
|
||||
document.write("<br>");
|
||||
// Redondeo al alza
|
||||
document.write("<br>valor redondeado con CEIL "+ Math.ceil(7.33));
|
||||
document.write("<br>");
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<input type="date" id="fecha" value="2024-02-24"/>
|
||||
<script>
|
||||
let fechaInput=document.getElementById("fecha").valueAsNumber;
|
||||
console.log(fechaInput);
|
||||
var fechaActual = new Date(); // Fecha y hora actuales
|
||||
console.log(fechaActual);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user