From af55650a42f476d9f5b604bfa5d4ccee22f058dc Mon Sep 17 00:00:00 2001
From: Marcos Lopez <marklogo@Matdis-Prog.home>
Date: Wed, 24 Jan 2024 13:51:24 +0100
Subject: [PATCH] Dia 34

---
 Practicas/Practicas JS/DOM 07/index.html      |  79 +++++++++
 .../DOM 6/ejercicio06_DOM_version2.html       |  98 +++++++++++
 Practicas/Practicas JS/DOM 6/js/main.js       |  13 ++
 .../Introduccion/10_OBJETOS_JAVASCRIPT.html   | 155 ++++++++++++++++++
 .../Introduccion/11_DATE_Javascript.html      | 101 ++++++++++++
 5 files changed, 446 insertions(+)
 create mode 100644 Practicas/Practicas JS/DOM 07/index.html
 create mode 100644 Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version2.html
 create mode 100644 Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html
 create mode 100644 Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html
diff --git a/Practicas/Practicas JS/DOM 07/index.html b/Practicas/Practicas JS/DOM 07/index.html
new file mode 100644
index 0000000..4352e0a
--- /dev/null
+++ b/Practicas/Practicas JS/DOM 07/index.html	
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        function muestraFechaMs() {
+            let ms = new Date().getTime();
+            alert(`Fecha en milisegundos: ${ms} `);
+            let manana = new Date();
+            manana.setDate(manana.getDate() + 1);
+            manana.setHours(10, 0, 0, 0);
+            alert(manana.getTime())
+        }
+
+        function fechaFormato() {
+            var diasSemana = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'];
+            var meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
+            let fecha = new Date();
+
+            const dia = diasSemana[fecha.getDay()]
+            const mes = meses[fecha.getMonth()]
+            const hora = fecha.getHours();
+            const minutos = fecha.getMinutes();
+            alert(`Hoy es ${dia}, ${fecha.getDate()} de ${mes} de ${fecha.getFullYear()} y son las ${hora}:${minutos}`)
+        }
+
+        function calcularDiasTranscurridos() {
+            var fechaReferencia = new Date('1950-01-01T10:00:00');
+            var fechaActual = new Date();
+            var diferenciaMilisegundos = fechaActual - fechaReferencia;
+            var diasTranscurridos = Math.floor(diferenciaMilisegundos / (1000 * 60 * 60 * 24));
+            alert('Días transcurridos desde el 1 de Enero de 1950 a las 10:00 hasta ahora: ' + diasTranscurridos + ' días.');
+        }
+
+        function calcularDiasFaltantes() {
+            var fechaInput = document.getElementById('fechaInput').value;
+            if (!fechaInput) {
+                alert('Por favor, selecciona una fecha.');
+                return;
+            }
+            var fechaSeleccionada = new Date(fechaInput);
+            var fechaActual = new Date();
+            var diferenciaMilisegundos = fechaSeleccionada - fechaActual;
+            var diasFaltantes = Math.ceil(diferenciaMilisegundos / (1000 * 60 * 60 * 24));
+            var resultadoElement = document.getElementById('resultado');
+            alert('Días faltantes hasta la fecha seleccionada: ' + diasFaltantes + ' días.');
+        }
+
+        function contarMs(){
+            const inicio=new Date();
+            prompt('Introduce el nombre');
+            prompt('Introduce los apellidos');
+            const fin=new Date();
+            const diferenciaMs=fin-inicio;
+            alert(`Has tardado ${diferenciaMs} ms en introducir los datos.`);
+        }
+
+
+    </script>
+</head>
+
+<body>
+    <div style="display: flex; flex-direction: column; width: min-content; gap: 4px; padding: 10px;">
+        <button onclick="muestraFechaMs()">Ahora en Ms</button>
+        <button onclick="fechaFormato()">Frase con hoy</button>
+        <button onclick="calcularDiasTranscurridos()">dias desde 1950</button>
+        <div style="display: flex; width: max-content; gap: 4px;"><button onclick="calcularDiasFaltantes()">Dias que faltan</button> <input type="date" name="fecha"
+                id="fechaInput">
+        </div>
+        <button onclick="contarMs()">Contar Tiempo</button>
+
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version2.html b/Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version2.html
new file mode 100644
index 0000000..541e5c7
--- /dev/null
+++ b/Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version2.html	
@@ -0,0 +1,98 @@
+<!Doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title> Ejercicio 06 JAVASCRIPT Coste viaje</title>
+		
+		<script>
+			// Función que obtiene los datos
+			function obtener() {
+				let dias=document.getElementById("dias").value;
+				let destino=document.getElementById("destino").value;
+				
+				
+				//Precio coche
+				if (dias>7) {
+					cocheT=dias*40;
+					}else{
+					if (dias<4){
+					cocheT=dias*80;}
+					else{cocheT=dias*60;}
+				}
+				
+				//Rellenar el input
+				document.getElementById("coche").value=cocheT;
+				
+				/*//Precio noches hotel
+					let hotelT=dias*90;
+					//Rellenar el input
+					document.getElementById("hotel").value=hotelT;
+				*/
+				
+					
+					
+					//Precios viaje en función del destino
+					if (destino === "europa") {
+						//Tasas // Vuelo 
+						document.getElementById("viaje").value=50;
+						document.getElementById("vuelo").value=500;
+						document.getElementById("hotel").value=dias*90;
+					}
+					
+					if (destino === "asia") {
+						document.getElementById("viaje").value=100;
+						document.getElementById("vuelo").value=1000;
+						document.getElementById("hotel").value=dias*110;
+					}
+					
+					if (destino === "africa") {
+						document.getElementById("viaje").value=120;
+						document.getElementById("vuelo").value=1200;
+						document.getElementById("hotel").value=dias*80;
+					}
+					
+					
+				if (dias>11){
+					document.getElementById("viaje").value=0;	
+				} 
+				
+				let viaje=parseFloat(document.getElementById("viaje").value);
+				let avion=parseFloat(document.getElementById("vuelo").value);
+				let hotel=parseFloat(document.getElementById("hotel").value);
+				
+				let total=avion+hotel+viaje+cocheT;
+				let totalI=(total*1.21).toFixed(2);
+				document.getElementById("total").value=totalI; 
+			}
+			
+		</script>
+		
+	</head>
+	<body>
+		<div id="container">
+			
+			<p>Introduzca número de dias
+				<input type="text" name="dias" id="dias"><br><br>
+				Seleccione Destino
+				<!-- Lista de selección -->
+				<select name="destino" id="destino">
+					<option value="europa">Europa</option>
+					<option value="asia">Asia</option>
+					<option value="africa">África</option>
+				</select></p>
+				
+				<br>
+				<p>Elige el día de salida <input type="date"  id="fecha"></p>
+				<br>
+				<p>Coste vuelo <input type="text" name="vuelo" id="vuelo"></p>
+				<p>Coste hotel <input type="text" name="hotel" id="hotel"></p>
+				<p>Tasas viaje <input type="text" name="viaje" id="viaje"></p>
+				<p>Coste alquiler coche <input type="text" name="coche" id="coche"></p>
+				<p>Coste total <input type="text" name="total" id="total" ></p>
+				
+				<input type="button" value="Calcular coste total" onclick="obtener();">
+				
+		</div>
+		<br>
+	</body>
+</html>	
\ No newline at end of file
diff --git a/Practicas/Practicas JS/DOM 6/js/main.js b/Practicas/Practicas JS/DOM 6/js/main.js
index 190af8f..830066f 100644
--- a/Practicas/Practicas JS/DOM 6/js/main.js	
+++ b/Practicas/Practicas JS/DOM 6/js/main.js	
@@ -44,3 +44,16 @@ function calculaTotales() {
   costeAlquilerCoche.value = alquilerCoche;
   costeTotal.value = total;
 }
+
+class Persona {
+  constructor(a) {
+    this.nombre = a;
+  }
+
+  obtenerNombre() {
+    return this.nombre;
+  }
+}
+
+let personas = new Persona('hola, ');
+console.log(personas.obtenerNombre());
\ No newline at end of file
diff --git a/Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html b/Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html
new file mode 100644
index 0000000..4b876d4
--- /dev/null
+++ b/Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html	
@@ -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>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html b/Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html
new file mode 100644
index 0000000..b551a42
--- /dev/null
+++ b/Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html	
@@ -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>
\ No newline at end of file
