Compare commits
2 Commits
ad40171fb4
...
af55650a42
| Author | SHA1 | Date | |
|---|---|---|---|
|
af55650a42 | ||
|
|
b83034e0ab |
62
Practicas/Practicas JS/DOM 05/ejercicio05_DOM.html
Normal file
62
Practicas/Practicas JS/DOM 05/ejercicio05_DOM.html
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!Doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Compra caja JAVASCRIPT</title>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
// Escribir mensaje en el input
|
||||||
|
function mensaje() {
|
||||||
|
// Obtener datos de los inputs
|
||||||
|
let nombre = document.getElementById("nombre").value;
|
||||||
|
let material = document.getElementById("material").value;
|
||||||
|
let tamano = document.querySelector("[name=tamano]:checked").value;
|
||||||
|
let comentarios = document.getElementById("comentarios").value;
|
||||||
|
|
||||||
|
// Ver en consola
|
||||||
|
console.log(nombre, material, tamano, comentarios);
|
||||||
|
// Escribir mensaje en el input
|
||||||
|
document.getElementById("respuesta").value = "Hola " + nombre + " has pedido una caja de " + material + " de tamaño " + tamano + ". " + comentarios;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
<p>Nombre cliente</p>
|
||||||
|
<input type="text" name="nombre" id="nombre">
|
||||||
|
<p>Material de la caja
|
||||||
|
<!-- Lista de selección -->
|
||||||
|
<select name="material" id="material">
|
||||||
|
<option value="madera">Madera</option>
|
||||||
|
<option value="metal">Metal</option>
|
||||||
|
<option value="plastico">Plástico</option>
|
||||||
|
</select></p>
|
||||||
|
|
||||||
|
<p>Seleccione un tamaño para la caja</p>
|
||||||
|
<br/>
|
||||||
|
<input type="radio" value="diminuta" name="tamano">Diminuta<br>
|
||||||
|
<input type="radio" value="mediana" name="tamano" checked>Mediana<br>
|
||||||
|
<input type="radio" value="grande" name="tamano">Grande<br>
|
||||||
|
<br>
|
||||||
|
<p>Comentarios</p>
|
||||||
|
<!-- Área de texto -->
|
||||||
|
<textarea name="opinion" rows="10" cols="60" id="comentarios"></textarea>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<input type="submit" value="Enviar" onclick="mensaje()">
|
||||||
|
<input type="text" name="respuesta" id="respuesta" size="80">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
Practicas/Practicas JS/DOM 05/ejercicio05_DOM.png
Normal file
BIN
Practicas/Practicas JS/DOM 05/ejercicio05_DOM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
56
Practicas/Practicas JS/DOM 05/index.html
Normal file
56
Practicas/Practicas JS/DOM 05/index.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 500px; margin: 0 auto;">
|
||||||
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
<label for="nombre">Nombre del cliente</label>
|
||||||
|
<input type="text" name="nombre" id="nombre" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 2px;">
|
||||||
|
<label for="tipoCaja">Material de la caja</label>
|
||||||
|
<select name="tipoCaja" id="tipoCaja" required>
|
||||||
|
<option value="Madera" selected>Madera</option>
|
||||||
|
<option value="Metal">Metal</option>
|
||||||
|
<option value="Plastico">Plastico</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
<p style="margin: 0px;">Seleccione unas dimensiones para la caja:</p>
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="dimensiones" id="diminuta" value="diminuta" readonly checked>
|
||||||
|
<label for="dimensiones">Diminuta</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="dimensiones" id="mediana" value="mediana">
|
||||||
|
<label for="dimensiones">Mediana</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="dimensiones" id="grande" value="grande">
|
||||||
|
<label for="dimensiones">Grande</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
<label for="comentarios">Comentarios</label>
|
||||||
|
<textarea name="comentarios" id="comentarios" cols="30" rows="10"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button onclick="generaPedido()"> Enviar </button>
|
||||||
|
<span id="resultado" style="border: 1px solid black;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
11
Practicas/Practicas JS/DOM 05/js/main.js
Normal file
11
Practicas/Practicas JS/DOM 05/js/main.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
function generaPedido(){
|
||||||
|
let txtNombre = document.getElementById("nombre").value;
|
||||||
|
let slbMaterial = document.getElementById("tipoCaja").value;
|
||||||
|
let chkDimensiones = document.querySelector('input[name="dimensiones"]:checked').value;
|
||||||
|
let txtComentarios = document.getElementById("comentarios").value;
|
||||||
|
let txtResultado = document.getElementById("resultado");
|
||||||
|
|
||||||
|
let resultado=` ${txtNombre} ha pedido una caja de ${slbMaterial} con unas dimensiones ${chkDimensiones}. ${txtComentarios}`
|
||||||
|
txtResultado.textContent=resultado;
|
||||||
|
}
|
||||||
79
Practicas/Practicas JS/DOM 07/index.html
Normal file
79
Practicas/Practicas JS/DOM 07/index.html
Normal file
|
|
@ -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>
|
||||||
49
Practicas/Practicas JS/DOM 4/ejercicio04_DOM.html
Normal file
49
Practicas/Practicas JS/DOM 4/ejercicio04_DOM.html
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!Doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Lista de la compra JAVASCRIPT</title>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function eliminar(elemento) {
|
||||||
|
// Utilizar remove
|
||||||
|
elemento.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function anadir() {
|
||||||
|
let listaCompra = document.getElementById("listaCompra");
|
||||||
|
let nuevoItem = document.getElementById("anadir").value;
|
||||||
|
|
||||||
|
if (nuevoItem === "") {
|
||||||
|
alert("No has añadido nada");
|
||||||
|
} else {
|
||||||
|
let item = document.createElement("li");
|
||||||
|
item.textContent = nuevoItem;
|
||||||
|
item.addEventListener("dblclick", function() {
|
||||||
|
eliminar(item);
|
||||||
|
});
|
||||||
|
listaCompra.appendChild(item);
|
||||||
|
document.getElementById("anadir").value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
<label>Mi lista de la compra:</label>
|
||||||
|
<input type="text" name="campo" id="anadir">
|
||||||
|
<input type="button" value="Añadir a la lista" onclick="anadir()">
|
||||||
|
|
||||||
|
<ul id="listaCompra"></ul>
|
||||||
|
|
||||||
|
<p>Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
Practicas/Practicas JS/DOM 4/index.html
Normal file
18
Practicas/Practicas JS/DOM 4/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="./js/main.js" defer></script>
|
||||||
|
<title>Ejercicio DOM 4</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<label for="lista">Mi lista de la compra: </label> <input type="text" name="lista" id="txtlista">
|
||||||
|
<button onclick="addElement()">Añadir a la lista</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul id="listUl"></ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
Practicas/Practicas JS/DOM 4/js/main.js
Normal file
16
Practicas/Practicas JS/DOM 4/js/main.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
|
||||||
|
function addElement(){
|
||||||
|
let txtElemento = document.getElementById('txtlista').value;
|
||||||
|
add(txtElemento);
|
||||||
|
}
|
||||||
|
function add(elemento){
|
||||||
|
let listUl = document.getElementById('listUl')
|
||||||
|
let listItem =document.createElement('li');
|
||||||
|
listItem.textContent=elemento;
|
||||||
|
listItem.addEventListener('dblclick',()=>{delElement(listItem)});
|
||||||
|
listUl.appendChild(listItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
function delElement(elemento){
|
||||||
|
elemento.remove();
|
||||||
|
}
|
||||||
15
Practicas/Practicas JS/DOM 6/Ejerccio06_DOM.txt
Normal file
15
Practicas/Practicas JS/DOM 6/Ejerccio06_DOM.txt
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
|
||||||
|
(Precios sin IVA)
|
||||||
|
Destino: 3 opciones
|
||||||
|
Vuelo: Europa=500, Asia=1000,Africa=1200
|
||||||
|
Número de noches: las que sean
|
||||||
|
Tasas del viaje: Europa=50, Asia=100, Africa=120
|
||||||
|
Coste hotel: 90 por noche
|
||||||
|
Coste alquiler coche: 60 por dia
|
||||||
|
|
||||||
|
|
||||||
|
Coste total: debemos calcularlo con IVA
|
||||||
|
|
||||||
|
|
||||||
|
----------------------------
|
||||||
|
|
||||||
BIN
Practicas/Practicas JS/DOM 6/ejercicio06_DOM.png
Normal file
BIN
Practicas/Practicas JS/DOM 6/ejercicio06_DOM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
79
Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version1.html
Normal file
79
Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version1.html
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!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
|
||||||
|
let 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (destino === "asia") {
|
||||||
|
document.getElementById("viaje").value=100;
|
||||||
|
document.getElementById("vuelo").value=1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (destino === "africa") {
|
||||||
|
document.getElementById("viaje").value=120;
|
||||||
|
document.getElementById("vuelo").value=1200;
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
98
Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version2.html
Normal file
98
Practicas/Practicas JS/DOM 6/ejercicio06_DOM_version2.html
Normal file
|
|
@ -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>
|
||||||
56
Practicas/Practicas JS/DOM 6/index.html
Normal file
56
Practicas/Practicas JS/DOM 6/index.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="./js/main.js" defer></script>
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
label{
|
||||||
|
display: inline-block;
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="display: flex; flex-direction: column; max-width: max-content; gap: 10px;">
|
||||||
|
<div style="display: flex; flex-direction: row; gap: 4px;">
|
||||||
|
<label for="nDias">Introduzca número de dias</label>
|
||||||
|
<input type="text" name="nDias" id="nDias" required>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; gap: 2px;">
|
||||||
|
<label for="destino">Seleccione destino</label>
|
||||||
|
<select name="destino" id="destino" required>
|
||||||
|
<option value=500 selected>Europa</option>
|
||||||
|
<option value=1000>Asia</option>
|
||||||
|
<option value=1200>Africa</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||||||
|
<div>
|
||||||
|
<label for="costeVuelo">Coste vuelo</label>
|
||||||
|
<input type="text" name="costeVuelo" id="costeVuelo" readonly>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="costeHotel">Coste hotel</label>
|
||||||
|
<input type="text" name="costeHotel" id="costeHotel" readonly>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="tasasViaje">Tasas viaje</label>
|
||||||
|
<input type="text" name="tasasViaje" id="tasasViaje" readonly>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="costeAlquilerCoche">Coste alquiler coche</label>
|
||||||
|
<input type="text" name="costeAlquilerCoche" id="costeAlquilerCoche" readonly>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="costeTotal">Coste total</label>
|
||||||
|
<input type="text" name="costeTotal" id="costeTotal" readonly>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<button onclick="calculaTotales()">Calcular coste total</button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
Practicas/Practicas JS/DOM 6/js/main.js
Normal file
59
Practicas/Practicas JS/DOM 6/js/main.js
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
function calculaTotales() {
|
||||||
|
let nDias = document.getElementById("nDias").value;
|
||||||
|
let destino = document.getElementById("destino").value;
|
||||||
|
let costeVuelo = document.getElementById("costeVuelo");
|
||||||
|
let costeHotel = document.getElementById("costeHotel");
|
||||||
|
let tasasViaje = document.getElementById("tasasViaje");
|
||||||
|
let costeAlquilerCoche = document.getElementById("costeAlquilerCoche");
|
||||||
|
let costeTotal = document.getElementById("costeTotal");
|
||||||
|
|
||||||
|
let PVPHOTEL;
|
||||||
|
let PVPALQUILERCOCHE =
|
||||||
|
parseInt(nDias) >= 7 ? 40 : parseInt(nDias) <= 3 ? 80 : 60;
|
||||||
|
let IVA = 1.21;
|
||||||
|
|
||||||
|
let tasas = 0;
|
||||||
|
switch (destino) {
|
||||||
|
case "500":
|
||||||
|
tasas = 50;
|
||||||
|
PVPHOTEL = 90;
|
||||||
|
break;
|
||||||
|
case "1000":
|
||||||
|
tasas = 100;
|
||||||
|
PVPHOTEL = 110;
|
||||||
|
break;
|
||||||
|
case "1200":
|
||||||
|
tasas = 120;
|
||||||
|
PVPHOTEL = 80;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (nDias >= 12) {
|
||||||
|
tasas = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let vuelo = parseInt(destino);
|
||||||
|
let hotel = nDias * PVPHOTEL;
|
||||||
|
let alquilerCoche = nDias * PVPALQUILERCOCHE;
|
||||||
|
let total = parseFloat((vuelo + hotel + tasas + alquilerCoche) * IVA).toFixed(
|
||||||
|
2
|
||||||
|
);
|
||||||
|
|
||||||
|
costeVuelo.value = vuelo;
|
||||||
|
costeHotel.value = hotel;
|
||||||
|
tasasViaje.value = tasas;
|
||||||
|
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());
|
||||||
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>
|
||||||
Loading…
Reference in New Issue
Block a user