marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dia 32

Browse Source
This commit is contained in:
Marcos Lopez 2024-01-22 13:46:08 +01:00
parent f49cedd764
commit ad40171fb4
12 changed files with 863 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_clases.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 02 - DOM </title>
<style>
.oculto {
display:none;
}
.visible {
display:inline;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
<p class="oculto">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a> auctor.</p>
<a id="enlace" href="#" onclick="muestra()">Sigue leyendo</a>
<br>
<a id="enlace2" class="oculto" href="#" onclick="oculta()">Oculta</a>
<script>
let parrafosOcultos=document.getElementsByClassName("oculto");
let parrafosVisibles=document.getElementsByClassName("visible");
let botonSigueLeyendo=document.getElementById("enlace");
let botonOcultaTexto=document.getElementById("enlace2");
function muestra() {
for (let i = 0; i < parrafosOcultos.length; i++) {
//parrafosOcultos[i].style.display = "inline";
parrafosOcultos[i].className = "visible";
}
botonOcultaTexto.style = "display: inline";
botonSigueLeyendo.style = "display: none";
}
function oculta() {
for (let i = 0; i < parrafosVisibles.length; i++) {
//parrafosOcultos[i].style.display = "none";
parrafosVisibles[i].className = "oculto";
}
botonOcultaTexto.style = "display: none";
botonSigueLeyendo.style = "display: inline";
}
</script>
</body>
</html>

75
Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_enunciado.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 01 - DOM b<>sico</title>
<style>
.oculto{
display: none;
}
.visible{
display: block;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci.
Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien
nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec
arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum
nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam
<a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.
</p>
<p class="parrafo oculto" id="oculto">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet
est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique.
Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id
augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula.
Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada
tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non
est pellentesque</a> auctor. <a href="#" onclick="toogleParrafo()">Ocultar</a> </p>
<a class="boton visible" id="enlace" href="#" onclick="toogleParrafo()">Sigue leyendo</a>
<script>
var elemento = document.getElementById('oculto');
var boton = document.getElementById('enlace');
function toogleParrafo() {
if (elemento.classList.contains('oculto')) {
mostrar()
} else {
ocultar()
}
}
function mostrar() {
elemento.classList.add('visible');
elemento.classList.remove('oculto');
boton.classList.add('oculto')
boton.classList.remove('visible')
}
function ocultar() {
elemento.classList.add('oculto');
elemento.classList.remove('visible');
boton.classList.add('visible')
boton.classList.remove('oculto')
}
</script>
</body>
</html>

3
Practicas/Practicas JS/DOM 02/ejercicio02_DOM_enunciado.html
View File

@ -59,9 +59,6 @@
}
</script>
</body>
</html>

105
Practicas/Practicas JS/DOM 03/ejercicio03_DOM.html Normal file
View File

@ -0,0 +1,105 @@
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 03 DOM (Accede a Formularios)</title>
<script>
// Conversor de divisas
function eur_dol() {
// Obtén el valor de la entrada con ID "eurosP"
let euros=document.getElementById("entradaEuros").value;
// Convierte el valor a un número de punto flotante
let eurosParse=parseFloat(euros);
// Realizo la conversión
let resultadoDolares=eurosParse*1.09;
// Paso a 2 decimales
let resultadoDolaresDecimales=resultadoDolares.toFixed(2);
// Obtengo el elemento para la respuesta
let inputRespuesta=document.getElementById("salidaDolares");
// Asigno la respuesta
inputRespuesta.value=resultadoDolaresDecimales;
}
function dol_eur() {
let dolar2=document.getElementById("dolarP").value;
let dolares=parseFloat(dolar2);
let resultado=dolares/1.09;
let resultadoD=resultado.toFixed(2);
let respuesta=document.getElementById("resultadoE");
respuesta.value=resultadoD;
}
// Calculadora precio IVA
function precioI() {
let precioNeto=document.getElementById("precioP").value;
let precioNetoP=parseFloat(precioNeto);
let precioI=precioNetoP*1.21;
let precioIF=precioI.toFixed(2);
alert("El precio con Iva es " + precioIF +" "+ "euros");
}
// Construye la frase
function frase() {
let nombre=document.getElementById("nombre").value;
let apellido=document.getElementById("apellido").value;
let ano=document.getElementById("ano").value;
let ciudad=document.getElementById("ciudad").value;
let mensaje="Hola " + nombre + " " + apellido + " naciste en " + ciudad + " en el año" + ano + ".";
alert(mensaje);
//Crear parrafo respuesta abajo (creandolo)
let p = document.createElement("p");
p.textContent = mensaje;
// Inserto en el body
//document.body.appendChild(p);
// Inserto debajo del botón exactamente
let sitio=document.getElementById("respuestaF")
sitio.insertAdjacentElement("afterend", p);
// Inserto modificando existente
let sitio2=document.getElementById("respuestaScript");
sitio2.textContent= "Respuesta: " + mensaje;
}
</script>
</head>
<body>
<h1>Conversor de monedas</h1>
<p>Introduce la cantidad en euros <input id="entradaEuros" type=number value=0><input type=button value="Convertir a dolares" onclick="eur_dol()"> <input id="salidaDolares" type=number value=0 ></p>
<br>
<p>Introduce la cantidad en dolares <input id="dolarP" type=number value=0> <input type=button value="Convertir a euros" onclick="dol_eur()">
<input id="resultadoE" type=number value=0> </p>
<br>
<br>
<h1>Calculadora precio con IVA</h1>
<p>Introduce el precio sin IVA <input id="precioP" type=number value=0 >
<br>
<br>
Pulsa resultado <input type=button value="Precio con IVA" onclick="precioI()" >
<br>
<h1>Escribe la frase</h1>
<br>
Nombre <input id="nombre" type=text value="" >
<br>
<br>
Apellido <input id="apellido" type=text value="" >
<br>
<br>
En que año naciste ? <input id="ano" type=number value="" >
<br>
<br>
En que ciudad ? <input id="ciudad" type=text value="" >
<br>
<br>
<p id="respuestaF"><input type=button value="Frase" onclick="frase()" ></p>
<p id="respuestaScript">Respuesta: </p>
<br>
</body>
</html>

38
Practicas/Practicas JS/DOM 03/index.html Normal file
View File

@ -0,0 +1,38 @@
<!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>
<h2>Conversor de monedas</h2>
<div>
<span>Introduce la cantidad en euros</span><input type="number" name="eurosInput" id="eurosInput" value="0">
<button onclick="eurToDolar()">Convertir adolares</button>
<input type="number" name="dolarOutput" id="dolarOutput" value="0">
</div>
<div>
<span>Introduce la cantidad en dolares</span> <input type="number" name="dolarInput" id="dolarInput" value="0">
<button onclick="dolarToEur()">Convertir adolares</button>
<input type="number" name="eurOutput" id="eurOutput" value="0">
</div>
<h2>Calculadora precio IVA</h2>
<span>Introduce el precio sin IVA</span> <input type="number" id="pvpInput"> <br>
<span>Pulsa para resultado</span> <button onclick="pvpIVA()">Precio con Iva</button>
<h3>Escribe la frase</h3>
<label for="nombre">Nombre</label><input type="text" name="nombre" id="nombre"> <br>
<label for="apellidos">Apellido</label><input type="text" name="apellidos" id="apellidos"> <br>
<label for="nacimiento">En que año naciste?</label><input type="number" name="nacimiento" id="nacimiento"> <br>
<label for="ciudad">En que ciudad?</label><input type="text" name="ciudad" id="ciudad"> <br>
<span id="frase"></span>
<button onclick="frase()">Frase</button>
</body>
</html>

29
Practicas/Practicas JS/DOM 03/js/main.js Normal file
View File

@ -0,0 +1,29 @@
function eurToDolar(){
let eurosInput = document.getElementById('eurosInput');
let dolarOutput = document.getElementById('dolarOutput');
resultado = parseFloat(eurosInput.value)*1.09;
dolarOutput.value=resultado.toFixed(2);
}
function dolarToEur(){
let dolarInput = document.getElementById('dolarInput');
let eurOutput = document.getElementById('eurOutput');
resultado = parseFloat(dolarInput.value)*0.9;
eurOutput.value=resultado.toFixed(2);
}
function pvpIVA(){
let pvpInput=document.getElementById('pvpInput');
alert(pvpInput.value*1.21)
}
function frase() {
let nombre = document.getElementById('nombre').value;
let apellidos = document.getElementById('apellidos').value;
let nacimiento = document.getElementById('nacimiento').value;
let ciudad = document.getElementById('ciudad').value;
let frase =document.getElementById('frase');
frase.innerHTML= (`Hola ${nombre} ${apellidos} nacido el año ${nacimiento} en ${ciudad} <br>`)
}

150
Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html Normal file
View File

@ -0,0 +1,150 @@
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 03 DOM (Accede a Formularios)</title>
<script>
// Conversor de divisas
function eur_dol() {
// Obtén el valor de la entrada con ID "eurosP"
let euros=document.getElementById("entradaEuros").value;
// Convierte el valor a un número de punto flotante
let eurosParse=parseFloat(euros);
// Realizo la conversión
let resultadoDolares=eurosParse*1.09;
// Paso a 2 decimales
let resultadoDolaresDecimales=resultadoDolares.toFixed(2);
// Obtengo el elemento para la respuesta
let inputRespuesta=document.getElementById("salidaDolares");
// Asigno la respuesta
inputRespuesta.value=resultadoDolaresDecimales;
}
function dol_eur() {
let dolar2=document.getElementById("dolarP").value;
let dolares=parseFloat(dolar2);
let resultado=dolares/1.09;
let resultadoD=resultado.toFixed(2);
let respuesta=document.getElementById("resultadoE");
respuesta.value=resultadoD;
}
// Calculadora precio IVA
function precioI() {
let precioNeto=document.getElementById("precioP").value;
let precioNetoP=parseFloat(precioNeto);
let precioI=precioNetoP*1.21;
let precioIF=precioI.toFixed(2);
alert("El precio con Iva es " + precioIF +" "+ "euros");
}
// Construye la frase
function frase() {
let nombre=document.getElementById("nombre").value;
let apellido=document.getElementById("apellido").value;
let ano=document.getElementById("ano").value;
let ciudad=document.getElementById("ciudad").value;
let mensaje="Hola " + nombre + " " + apellido + " naciste en " + ciudad + " en el año" + ano + ".";
alert(mensaje);
//Crear parrafo respuesta abajo (creandolo)
let p = document.createElement("p");
p.textContent = mensaje;
// Inserto en el body
//document.body.appendChild(p);
// Inserto debajo del botón exactamente
let sitio=document.getElementById("respuestaF")
sitio.insertAdjacentElement("afterend", p);
// Inserto modificando existente
let sitio2=document.getElementById("respuestaScript");
sitio2.textContent= "Respuesta: " + mensaje;
}
// Conversor Centigrados, Fahrenheit y Kelvin
function convertirACentigrados() {
var inputCentigrados = document.getElementById("cent").value;
var centigrados = parseFloat(inputCentigrados);
var resultadoFahrenheit = (centigrados * 1.8) + 32;
document.getElementById("fahr").value = resultadoFahrenheit;
var resultadoKelvin = centigrados + 273.15;
document.getElementById("kelv").value = resultadoKelvin;
}
function convertirAFahrenheit() {
var inputFahrenheit = document.getElementById("fahr").value;
var fahrenheit = parseFloat(inputFahrenheit);
var resultadoCentigrados = (fahrenheit - 32) / 1.8;
document.getElementById("cent").value = resultadoCentigrados;
var resultadoKelvin = (resultadoCentigrados * 1.8) + 32;
document.getElementById("kelv").value = resultadoKelvin;
}
function convertirAKelvin() {
var inputKelvin = document.getElementById("kelv").value;
var kelvin = parseFloat(inputKelvin);
var resultadoCentigrados = kelvin - 273.15;
document.getElementById("cent").value = resultadoCentigrados;
var resultadoFahrenheit = (resultadoCentigrados * 1.8) + 32;
document.getElementById("fahr").value = resultadoFahrenheit;
}
</script>
</head>
<body>
<h1>Conversor de monedas</h1>
<p>Introduce la cantidad en euros <input id="entradaEuros" type=number value=0><input type=button value="Convertir a dolares" onclick="eur_dol()"> <input id="salidaDolares" type=number value=0 ></p>
<br>
<p>Introduce la cantidad en dolares <input id="dolarP" type=number value=0> <input type=button value="Convertir a euros" onclick="dol_eur()">
<input id="resultadoE" type=number value=0> </p>
<br>
<br>
<h1>Calculadora precio con IVA</h1>
<p>Introduce el precio sin IVA <input id="precioP" type=number value=0 >
<br>
<br>
Pulsa resultado <input type=button value="Precio con IVA" onclick="precioI()" >
<br>
<h1>Escribe la frase</h1>
<br>
Nombre <input id="nombre" type=text value="" >
<br>
<br>
Apellido <input id="apellido" type=text value="" >
<br>
<br>
En que año naciste ? <input id="ano" type=number value="" >
<br>
<br>
En que ciudad ? <input id="ciudad" type=text value="" >
<br>
<br>
<p id="respuestaF"><input type=button value="Frase" onclick="frase()" ></p>
<p id="respuestaScript">Respuesta: </p>
<br>
<h1>Conversor Centigrados, Fahrenheit y Kelvin</h1>
<br>
<br>
Centígrados <input id="cent" type=number value="0" onkeyup="convertirACentigrados()">
<br>
<br>
Fahrenheit <input id="fahr" type=number value="0" onkeyup="convertirAFahrenheit()">
<br>
<br>
Kelvin <input id="kelv" type=number value="0" onkeyup="convertirAKelvin()">
<br>
</body>
</html>

163
Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html Normal file
View File

@ -0,0 +1,163 @@
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 03 DOM (Accede a Formularios)</title>
<script>
// Conversor de divisas
function eur_dol() {
// Obtén el valor de la entrada con ID "eurosP"
let euros=document.getElementById("entradaEuros").value;
// Convierte el valor a un número de punto flotante
let eurosParse=parseFloat(euros);
// Realizo la conversión
let resultadoDolares=eurosParse*1.09;
// Paso a 2 decimales
let resultadoDolaresDecimales=resultadoDolares.toFixed(2);
// Obtengo el elemento para la respuesta
let inputRespuesta=document.getElementById("salidaDolares");
// Asigno la respuesta
inputRespuesta.value=resultadoDolaresDecimales;
}
function dol_eur() {
let dolar2=document.getElementById("dolarP").value;
let dolares=parseFloat(dolar2);
let resultado=dolares/1.09;
let resultadoD=resultado.toFixed(2);
let respuesta=document.getElementById("resultadoE");
respuesta.value=resultadoD;
}
// Calculadora precio IVA
function precioI() {
let precioNeto=document.getElementById("precioP").value;
let precioNetoP=parseFloat(precioNeto);
let precioI=precioNetoP*1.21;
let precioIF=precioI.toFixed(2);
alert("El precio con Iva es " + precioIF +" "+ "euros");
}
// Construye la frase
function frase() {
let nombre=document.getElementById("nombre").value;
let apellido=document.getElementById("apellido").value;
let ano=document.getElementById("ano").value;
let ciudad=document.getElementById("ciudad").value;
let mensaje="Hola " + nombre + " " + apellido + " naciste en " + ciudad + " en el año" + ano + ".";
alert(mensaje);
//Crear parrafo respuesta abajo (creandolo)
let p = document.createElement("p");
p.textContent = mensaje;
// Inserto en el body
//document.body.appendChild(p);
// Inserto debajo del botón exactamente
let sitio=document.getElementById("respuestaF")
sitio.insertAdjacentElement("afterend", p);
// Inserto modificando existente
let sitio2=document.getElementById("respuestaScript");
sitio2.textContent= "Respuesta: " + mensaje;
}
// Conversor Centigrados, Fahrenheit y Kelvin
//Me aseguro de que haya cargado la página
document.addEventListener('DOMContentLoaded',inicio);
function inicio() {
var inputCentigrados = document.getElementById("cent");
var inputFahrenheit = document.getElementById("fahr");
var inputKelvin = document.getElementById("kelv");
//Asigno los eventos
inputCentigrados.addEventListener('input', convertirACentigrados);
inputFahrenheit.addEventListener('input', convertirAFahrenheit);
inputKelvin.addEventListener('input', convertirAKelvin);
};
function convertirACentigrados() {
var inputCentigrados = document.getElementById("cent").value;
var centigrados = parseFloat(inputCentigrados);
var resultadoFahrenheit = (centigrados * 1.8) + 32;
document.getElementById("fahr").value = resultadoFahrenheit;
var resultadoKelvin = centigrados + 273.15;
document.getElementById("kelv").value = resultadoKelvin;
}
function convertirAFahrenheit() {
var inputFahrenheit = document.getElementById("fahr").value;
var fahrenheit = parseFloat(inputFahrenheit);
var resultadoCentigrados = (fahrenheit - 32) / 1.8;
document.getElementById("cent").value = resultadoCentigrados;
var resultadoKelvin = (resultadoCentigrados * 1.8) + 32;
document.getElementById("kelv").value = resultadoKelvin;
}
function convertirAKelvin() {
var inputKelvin = document.getElementById("kelv").value;
var kelvin = parseFloat(inputKelvin);
var resultadoCentigrados = kelvin - 273.15;
document.getElementById("cent").value = resultadoCentigrados;
var resultadoFahrenheit = (resultadoCentigrados * 1.8) + 32;
document.getElementById("fahr").value = resultadoFahrenheit;
}
</script>
</head>
<body>
<h1>Conversor de monedas</h1>
<p>Introduce la cantidad en euros <input id="entradaEuros" type=number value=0><input type=button value="Convertir a dolares" onclick="eur_dol()"> <input id="salidaDolares" type=number value=0 ></p>
<br>
<p>Introduce la cantidad en dolares <input id="dolarP" type=number value=0> <input type=button value="Convertir a euros" onclick="dol_eur()">
<input id="resultadoE" type=number value=0> </p>
<br>
<br>
<h1>Calculadora precio con IVA</h1>
<p>Introduce el precio sin IVA <input id="precioP" type=number value=0 >
<br>
<br>
Pulsa resultado <input type=button value="Precio con IVA" onclick="precioI()" >
<br>
<h1>Escribe la frase</h1>
<br>
Nombre <input id="nombre" type=text value="" >
<br>
<br>
Apellido <input id="apellido" type=text value="" >
<br>
<br>
En que año naciste ? <input id="ano" type=number value="" >
<br>
<br>
En que ciudad ? <input id="ciudad" type=text value="" >
<br>
<br>
<p id="respuestaF"><input type=button value="Frase" onclick="frase()" ></p>
<p id="respuestaScript">Respuesta: </p>
<br>
<h1>Conversor Centigrados, Fahrenheit y Kelvin</h1>
<br>
<br>
Centígrados <input id="cent" type=number value="0">
<br>
<br>
Fahrenheit <input id="fahr" type=number value="0">
<br>
<br>
Kelvin <input id="kelv" type=number value="0" >
<br>
</body>
</html>

44
Practicas/Practicas JS/Eventos 01/index.html Normal file
View File

@ -0,0 +1,44 @@
<!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>
</head>
<body>
<h2>Conversor de monedas</h2>
<div>
<span>Introduce la cantidad en euros</span><input type="number" name="eurosInput" id="eurosInput" value="0">
<button onclick="eurToDolar()">Convertir adolares</button>
<input type="number" name="dolarOutput" id="dolarOutput" value="0">
</div>
<div>
<span>Introduce la cantidad en dolares</span> <input type="number" name="dolarInput" id="dolarInput" value="0">
<button onclick="dolarToEur()">Convertir adolares</button>
<input type="number" name="eurOutput" id="eurOutput" value="0">
</div>
<h2>Calculadora precio IVA</h2>
<span>Introduce el precio sin IVA</span> <input type="number" id="pvpInput"> <br>
<span>Pulsa para resultado</span> <button onclick="pvpIVA()">Precio con Iva</button>
<h3>Escribe la frase</h3>
<label for="nombre">Nombre</label><input type="text" name="nombre" id="nombre"> <br>
<label for="apellidos">Apellido</label><input type="text" name="apellidos" id="apellidos"> <br>
<label for="nacimiento">En que año naciste?</label><input type="number" name="nacimiento" id="nacimiento"> <br>
<label for="ciudad">En que ciudad?</label><input type="text" name="ciudad" id="ciudad"> <br>
<span id="frase"></span>
<button onclick="frase()">Frase</button> <br>
<label for="gc">Grados Centigrados</label><input type="number" name="gc" id="gc" onkeyup="convertGC()"> <br>
<label for="gf">Fahrenheit</label><input type="number" name="gf" id="gf" onkeyup="convertGF()"> <br>
<label for="gk">Kelvin</label><input type="number" name="gk" id="gk" onkeyup="convertGK()"> <br>
</body>
</html>

53
Practicas/Practicas JS/Eventos 01/js/main.js Normal file
View File

@ -0,0 +1,53 @@
function eurToDolar(){
let eurosInput = document.getElementById('eurosInput');
let dolarOutput = document.getElementById('dolarOutput');
resultado = parseFloat(eurosInput.value)*1.09;
dolarOutput.value=resultado.toFixed(2);
}
function dolarToEur(){
let dolarInput = document.getElementById('dolarInput');
let eurOutput = document.getElementById('eurOutput');
resultado = parseFloat(dolarInput.value)*0.9;
eurOutput.value=resultado.toFixed(2);
}
function pvpIVA(){
let pvpInput=document.getElementById('pvpInput');
alert(pvpInput.value*1.21)
}
function frase() {
let nombre = document.getElementById('nombre').value;
let apellidos = document.getElementById('apellidos').value;
let nacimiento = document.getElementById('nacimiento').value;
let ciudad = document.getElementById('ciudad').value;
let frase =document.getElementById('frase');
frase.innerHTML= (`Hola ${nombre} ${apellidos} nacido el año ${nacimiento} en ${ciudad} <br>`)
}
function convertGC(){
let tempC=parseFloat(document.getElementById('gc').value)
let fahrenheit = (tempC*9/5)+32;
let kelvin = tempC + 273.15;
document.getElementById('gf').value=fahrenheit
document.getElementById('gk').value=kelvin
}
function convertGF(){
let tempF=parseFloat(document.getElementById('gf').value)
let celsius = (tempF-32)*5/9
let kelvin = celsius + 273.15;
document.getElementById('gc').value=celsius
document.getElementById('gk').value=kelvin
}
function convertGK(){
let tempK=parseFloat(document.getElementById('gk').value)
let celsius = tempK - 273.15;
let fahrenheit = (celsius-32)*5/9;
document.getElementById('gc').value=celsius;
document.getElementById('gf').value=fahrenheit;
}

122
Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html Normal file
View File

@ -0,0 +1,122 @@
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EVENTOS DOM</title>
<style>
#miElemento {
color:green;
font-size:2em;
}
</style>
</head>
<body>
<div id="miElemento"><p>Hola tengo aplicado un evento</p></div>
<script>
/*
Manejo del DOM (Document Object Model) en JavaScript.
Usos habituales incluyen:
Manipulación de Contenido: Cambiar, agregar o eliminar elementos HTML en respuesta a eventos o acciones del usuario.
Actualización de Estilos: Modificar propiedades de estilo CSS para cambiar la apariencia de elementos en la página.
Manejo de Eventos: Asociar funciones JavaScript a eventos como clics, cambios, y teclas presionadas.
Validación de Formularios: Verificar y validar datos de entrada en formularios antes de enviarlos al servidor.
Animaciones y Transiciones: Crear efectos visuales mediante cambios graduales en propiedades CSS usando JavaScript.
Creación de Elementos Dinámicamente: Generar y agregar nuevos elementos HTML al DOM según sea necesario.
*/
/*
Manejo de eventos:
Identificación del Elemento: Selecciona el elemento HTML al que deseas asociar un evento. Puedes hacer esto usando métodos como document.getElementById, document.querySelector, etc.
Asociación del Evento: Utiliza un método de asociación de eventos, como addEventListener, para vincular una función de JavaScript al evento específico del elemento.
*/
//Selección del Elemento:
const miElemento = document.getElementById('miElemento');
//Uso de addEventListener:
miElemento.addEventListener('click', miFuncion);
//Definición de la Función:
function miFuncion() {
// Código a ejecutar cuando se produce el evento
if (miElemento.style.color === "green") {
miElemento.style.color="blue";
} else {
miElemento.style.color="green";
}
}
//Cuando ocurre el evento (por ejemplo, un clic del mouse en el elemento), la función asociada se ejecuta automáticamente.
/*
Eventos de Ratón:
click: Se activa cuando se hace clic en un elemento.
dblclick: Se activa cuando se hace doble clic en un elemento.
mousedown: Se activa cuando se presiona el botón del ratón.
mouseup: Se activa cuando se suelta el botón del ratón.
mousemove: Se activa cuando se mueve el ratón sobre un elemento.
Eventos de Teclado:
keydown: Se activa cuando se presiona una tecla.
keyup: Se activa cuando se suelta una tecla.
keypress: Se activa cuando se mantiene presionada una tecla.
Eventos de Formulario:
submit: Se activa cuando se envía un formulario.
change: Se activa cuando el valor de un elemento de formulario cambia.
input: Se activa cuando se introduce texto en un campo de entrada.
Eventos de Documento:
DOMContentLoaded: cuando el documento HTML ha sido completamente cargado y analizado(sin imágenes y estilos).
Eventos de Ventana:
resize: Se activa cuando la ventana del navegador se redimensiona.
scroll: Se activa cuando se desplaza la barra de desplazamiento de la ventana.
Eventos de foco:
focus: Se activa cuando un elemento recibe el foco.
blur: Se activa cuando un elemento pierde el foco.
Eventos de Arrastre:
dragstart: Se activa cuando se inicia el proceso de arrastre de un elemento.
dragend: Se activa cuando se completa el proceso de arrastre de un elemento.
Eventos de Tiempo:
setTimeout: Permite ejecutar una función después de un cierto tiempo de espera.
setInterval: Permite ejecutar una función repetidamente cada cierto intervalo de tiempo.
Eventos de Historial de Navegación:
popstate: Se activa cuando el historial de navegación cambia.
Eventos de Animación:
animationstart: Se activa cuando una animación CSS comienza.
animationend: Se activa cuando una animación CSS termina.
Eventos de Red:
online: Se activa cuando el dispositivo se conecta a internet.
offline: Se activa cuando el dispositivo pierde la conexión a internet.
Eventos de Geolocalización:
geolocation: la posición geográfica del dispositivo cambia.
Eventos de Escritura táctil:
touchstart: Se activa cuando se toca la pantalla.
touchend: Se activa cuando se levanta el dedo de la pantalla.
Eventos de Clipboard:
cut: Se activa cuando se corta contenido en el portapapeles.
copy: Se activa cuando se copia contenido en el portapapeles.
paste: Se activa cuando se pega contenido desde el portapapeles.
*/
</script>
</body>
</html>

31
Practicas/Practicas JS/boton escapista/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mover botón con JavaScript</title>
<style>
#moverBoton {
position: absolute;
top: 50px;
left: 50px;
transition: top 0.3s ease, left 0.3s ease;
}
</style>
</head>
<body>
<button id="moverBoton" onmouseover="moverBoton()">Pulsame</button>
<script>
function moverBoton() {
var boton = document.getElementById('moverBoton');
var nuevaPosicionTop = Math.random() * (window.innerHeight - boton.clientHeight);
var nuevaPosicionLeft = Math.random() * (window.innerWidth - boton.clientWidth);
boton.style.top = nuevaPosicionTop + 'px';
boton.style.left = nuevaPosicionLeft + 'px';
}
</script>
</body>
</html>